Image Map Responsive

So I did a lot of Googling … but didnt come up with answer.

I am trying to make a page with about 10-15 hotspots on an image. Let’s say you have a photo of a human and the user can touch a body part and you get a toaster style popover that says the body part.

I want to make one single image …and not have to slice it apart. I am going to assume even if I could figure out how to slice it … putting that back together would be a nightmare.

Any ideas for me? Sorry to be vague… using Ionic 3 btw.

Try to use HTML5 Canvas, i think that is possible

Are you looking for an image map?
https://www.w3schools.com/tags/tag_map.asp

1 Like

I was able to take this example and ngmodule and make it work “sorta”. I have a new issue that is killing me , but I’ll make another post.

Hi all, How can a image be responsive, as I have set the cordo for my image however due to different screen size, the cordo does not match to picture

Use an HTML layer with Divs that are clickable. For the position use percentages. This will work in 75% of cases. You will have to adjust for large screens. If you need more code examples i can share.