CODEWITHSUNDEEP
htmlcssreactjsimagemap
Mohammed Hamdoon
Mohammed Hamdoon

Reputation: 107

Image mapping, adding different buttons to image

I have a blue print png image of an area which is to be constructed, I want to add 4 different buttons/points/anchors anything so that when a user hovers upon them different information will be displayed, I will share an image demonstrating what I'm trying to say, can't share the actual image for reasons, but the image that I will share says what I'm trying to achieve. enter image description here

as you can see the rectangle is basically the blue print, I want to add those 4 plus buttons exactly at those points. I have checked the map area tags from HTML but they only give an area of an image, I cannot customize them like having a plus button, or have hovering effects on them, plus on small screens their positions ofcourse change. How can I achieve this and also the buttons being responsive where they stick to there positions or slightly change postions according to the image size becuase on smaller screens the image size is reduced.

For reference on what I'm trying to achieve also please check this website : https://www.neom.com/en-us the second section has like a map with points on it and no matter the screen size the points change their size slightly but the positions are fixed.

Upvotes: 0

Views: 78

Answers (0)

Related Questions