OFF CYAN BLUE RED MAGENTA GREEN YELLOW

Dynamically Rescaling an Image Map -this method often doesn't (currently) work

Jan 11, 2009

This page's single image map is defined using percentage coordinates.

HTML4 states that AREA coordinates can be in percent units. An obvious and useful interpretation is that making your coordinates percentages means they are independent of the displayed size of the image. Unfortunately, this is currently not a universal browser behavior.

You can use this page to test how your browser treats percentage units. Below is the same image file displayed at three sizes. The smallest size has a one-to-one correlation between the browser raster units and the file pixels.

The hope is that the coordinates will be treated as percentages of the DISPLAYED size; not the size of the actual image file. I could not find any description of HTML that clearly states that percent units should not work with each of the sizes. But every browser I tried (firefox, iexplore, opera, safari, chrome) just treated the percentages as percentages of the unscaled image file; or even worse -- some treat the percent units as pixel values. Oddly, in some the "default" area resizes to the full image size; but no other region does.

Do percent units act as percent units?

100x100 200x200 400x400

Click in the image and the name of the color you clicked on should appear. If this only works in the smallest image, your browser can't handle this.



The HTML being tested 

   <map id="circles" name="circles" >
   <area  title="OFF      AREA"  alt="OFF"      shape="default"  onclick="label('OFF')"    />
   <area  title="CYAN     AREA"  alt="CYAN"     shape="circle"   coords="50%,50%,20%"      onclick="label('CYAN')"      />
   <area  title="BLUE     AREA"  alt="BLUE"     shape="circle"   coords="25%,25%,20%"      onClick="label('BLUE');"     />
   <area  title="RED      AREA"  alt="RED"      shape="circle"   coords="25%,75%,20%"      onClick="label('RED');"      />
   <area  title="MAGENTA  AREA"  alt="MAGENTA"  shape="circle"   coords="75%,25%,20%"      onClick="label('MAGENTA');"  />
   <area  title="GREEN    AREA"  alt="GREEN"    shape="circle"   coords="75%,75%,20%"      onClick="label('GREEN');"    />
   <area  title="YELLOW   AREA"  alt="YELLOW"   shape="rect"     coords="0%,0%,100%,100%"  onClick="label('YELLOW');"   />
   </map>

   <img id="myimage2" src="100x100.gif" alt="100x100" usemap="#circles" />
   <img id="myimage2" src="200x200.gif" alt="200x200" usemap="#circles" />
   <img id="myimage2" src="400x400.gif" alt="400x400" usemap="#circles" />
John S. Urban, Feb 23, 2008