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.
- Big Discussion on why HTML5 should allow resizing without the need for JavaScript
- Simple Example where regions are links to URLs
- Simple Example where clicking on regions executes JavaScript functions
- 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.
-
-
If percent units work in your browser you picked a good browser ( These do not work in most browsers)
TIPS
If you don't have packages to help you make image maps, here are some simple tricks ...
Other IMG examples
Others' IMG examples
