The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to build a responsive image map

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #276631

    Hi all.

    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.


    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!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.