htmlcssimagemap

Responsive image map


I have an existing image map in a responsive html layout. Images scale according to browser size, but the image coordinates are obviously fixed pixel sizes. What options do I have to resize the image map coordinates?


Solution

  • For responsive image maps you will need to use a plugin:

    https://github.com/stowball/jQuery-rwdImageMaps (No longer maintained)

    Or

    https://github.com/davidjbradshaw/imagemap-resizer


    No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates.

    http://www.howtocreate.co.uk/tutorials/html/imagemaps

    And also this page for testing whether browsers implement

    http://home.comcast.net/~urbanjost/IMG/resizeimg3.html