Image map with popup form
Question

Hi All,

There is a requirement in our project that I need to have an image with multiple parts in it. On click of each parts I need to show a popup with a question and options like "Yes" or "No".

For example, below is a sample image with computer accessories and need to ask our employees what are the accessories they have got in their WFH setup. On click of each part a popup should open with a question something like "Do you have Webcam installed and ready to use?" with radio buttons to say Yes or No, and goes on for each parts. 

How to achieve this with single picture?

I am trying few ideas like,

  • Create image maps with IDs
  • Implement guided tour plugins on each map areas
  • Tweak the tour plugin code to add question/answer with callback

Above approach have few issues like image map doesn't work properly on different screen sizes and combined effort takes lot of time to finish.

Please suggest if there is any forge component available for this? Or any other better approach.

Thanks,

Karthik

Hi Karthik,

I remember using HTML Image Maps for this kind of use case but it was a way back when I was still in university. Never used it in a proper application with end-users but I think this can help you.


You also have a Forge component that has similarities to what you are trying: Floor Plan 

Champion

Hi Karthik Nataraj,

I know it has been a while since you first ask this, but recently I was working on a component that could help you. The component is G Markeable Area , it was not intended for this scenario but I have created a sample project that might help.

It is triggering a popup and adding the response to a list if the user clicks on any Part that is defined, otherwise it ignores the click.

It is reacting to the picture size. so that when the user resizes the screen the click position will always reflect the object clicked.

I think it would need some tweaks to fully accomodate your requirements , either way here it is Working station setup .

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.