Dynamically Resizing Image Maps

Jan 12, 2009

Client-side image maps are pixmaps (large single images) where different regions can be assigned different links.

HTML5 does not (currently) support image maps being resized; which means you need a new set of coordinates for an image if you display it at any size other than the original just using HTML.

Browsers could easily support resizable image/image map combinations by supporting percent units in the AREA definitions, as it seems that HTML4 specifications define percent units in image maps. You can use JavaScript to get around the problem (see next section), but HTML5 should define that as an option.

Making image maps resize using JavaScript

There is a work-around if your browser supports JavaScript. The following examples show this work-around in action in various ways. All but the USA map example are intentionally very simple so you can copy the page and change it to work with your own images.

  1. Big Discussion on why HTML5 should allow resizing without the need for JavaScript
  2. Simple Example where regions are links to URLs
  3. Simple Example where clicking on regions executes JavaScript functions
  4. Example where a single image stays the size of the browser window and lets you see how different browsers show alert(3) windows; title= and alt= fields for elements; and uses polygons instead of circles for the element to allow proper scaling of circles when non-uniform scaling is applied. It does a few odd things as not all the browsers behave the same yet.
    There are two examples. The first pop-up is a simple point-of-concept example if you want a short source file to look at; the second one is a simple map of the USA. Click on a search "type" and then click on a State in the map.
    1. If percent units work in your browser you picked a good browser ( These do not work in most browsers)


      If you don't have packages to help you make image maps, here are some simple tricks ...

      Other IMG examples

      Others' IMG examples