September 13, 2018 at 11:52 am #276631
I am a semi-amateur at web design, with some HTML and CSS under my belt.
I have been asked to create a responsive image map, with the suggestion I use SVG.
I do not know the first thing about how to create a responsive image map, only the old-school non-responsive kind.
For example, I have an image of a city-scape. Each building needs to be a clickable item. So, rectangles to describe the building shapes, that are then clickable so we can do a pop-up of an image with some text.
I was given something called JQuery-rwdImageMaps-master, but don’t know the steps from there. The github where this was found only provides this file without any instructions on github or otherwise, as if the user knows what to do with it.
I have read that this is doable through jQuery and SVG, but need a recipe for this.
Any tried and true processes out there for creating a responsive image map on an HTML website?
Many thanks.April 15, 2019 at 8:25 am #286345
So, the simplest answer I could think and test it was to apply the css “transform: scale(X);” to the parent of image and map.
I guess, as long as you have a big enough mapped content, this must work combining it to media query.
Best of luck!
You must be logged in to reply to this topic.