Dynamically Resizing Image Maps

Jan 12, 2009

Client-side image maps are pixmaps (large single images) where different regions can be assigned different links. HTML does not (currently) support them 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. You can use JavaScript to get around that, but HTML5 should define that as an option.

Making image maps resize using 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)

• Simple Example with coordinates as percentages -- same image file, displayed at three sizes
• Simple Example with IMG width=100% as well, showing even more issues
• Simple Example with coordinates at percentages -- same map, three differently sized files

HTML could easily support resizable image/image map combinations

• Big Discussion on why HTML5 should allow resizing without the need for JavaScript

TIPS

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

• Using your browser to get coordinates using a server-side image display

Other IMG examples

• Mixing sound and image maps

Others' IMG examples

• Geographic Image Maps can be found at "Flags Of The World", plus .. it's fun and informative.