What does your favorite browser do with percentage units?

This page is used to demonstrate the behavior of the following:

<div>
   <img id="myimage" src="hcopy.gif" alt="Round buttons" usemap="#circles" width="99.9%" />
   <map id="circles" name="circles" >
      <area  title='OFF      AREA'  alt='OFF'      shape='default'                           onclick="DHTMLSound('../sounds/bark.au');" />
      <area  title='CYAN     AREA'  alt='CYAN'     shape='circle'  coords='50%,50%,20%'      onclick="DHTMLSound('../sounds/boing.au');" />
      <area  title='BLUE     AREA'  alt='BLUE'     shape='circle'  coords='25%,25%,20%'      onclick="DHTMLSound('../sounds/bong.au');" />
      <area  title='RED      AREA'  alt='RED'      shape='circle'  coords='25%,75%,20%'      onclick="DHTMLSound('../sounds/drumroll.au');" />
      <area  title='MAGENTA  AREA'  alt='MAGENTA'  shape='circle'  coords='75%,25%,20%'      onclick="DHTMLSound('../sounds/bass-snap.au');" />
      <area  title='GREEN    AREA'  alt='GREEN'    shape='circle'  coords='75%,75%,20%'      onclick="DHTMLSound('../sounds/hammer.au');" />
      <area  title='YELLOW   AREA'  alt='YELLOW'   shape='rect'    coords='0%,0%,100%,100%'  onclick="DHTMLSound('../sounds/piano-beep.au');" />
   </map>
</div>

Image size and imagemap hotspot units both in percentages

The above image has an image map defined with coordinates in percentage units. The IMG element has width=100% set. Intuitively, this would seem to mean the graphic image changes size when the width of the browser changes size; and that the image map coordinates would do the same. In most browsers, the coordinates of the map only align with the image when the image map is displayed with a one-to-one mapping of the file pixels to display pixels (Note this file's image is a 100x100 pixel file). This appears to be a commonly surprising failure, given the tradition of browsers trying to render HTML reasonably, even when confronted with syntax errors and ambiguities. Note that HTML5 does not appear to mention percent coordinates for AREA elements.

Working Example

Click to make the pixel 100x100 and it will work; use the other buttons to see what your browser does. Can it reset to 100%? What size does it say the image is when it's at full screen size? Do the coordinates for the different areas rescale?

Noted browser differences

Note that most browsers take 100% to mean the allowed width of the element they are contained in. In this example CSS is used to request no border or padding around the sample image.

Another variation is whether the TITLE and ALT attribute values are displayed, and whether they show in the browser border, or at the mouse location as you enter a region. Some browsers show you the URL pointed to by the HREF= attribute of the region if it is present.

John S. Urban, Jan 11, 2009

---