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
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
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.
- Simple Example where regions are links to URLs
- 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
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