Skip to main content

Forums

This topic contains 1 reply, has 2 voices, and was last updated by  scarlet_witch 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #276631

    domaindominions
    Participant

    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.

    #286345

    scarlet_witch
    Participant

    Hi!
    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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star