Monday, August 11, 2008
Trappiste Landscape
Blog Entry #122
In this post, we will in source order work through the area elements of the monkmap/monkareas image map that is applied to the monk.gif image in HTML Goodies' "So You Want A Client-Side Image Map, Huh?" tutorial.
(1) <area shape="rect" coords="91,30 186,98" href="http://www.nfl.com" alt="NFL Home Page">
As noted in the previous post, the shape attribute is shared by the area and anchor elements; for both elements, the default shape value is rect. As you would guess, shape="rect" specifies a rectangular subregion in an image-map image.
For the coords attribute, we impose on the image a screen/viewport/layer-type coordinate system whose
(a) origin, (0,0), is at the image's upper-left-hand corner,
(b) horizontal x-coordinate increases as we go from left to right across the image, and
(c) vertical y-coordinate increases as we go from top to bottom across the image.
For a rectangular image-map subregion, the coords attribute value should hold four coordinates:
coords="left-x, top-y, right-x, bottom-y"
In relation to the coords="91,30 186,98" attribute, these coordinates have the following meanings:
(a) 91/left-x: the area rectangle's left edge is 91 pixels to the right of monk.gif's left edge.
(b) 30/top-y: the area rectangle's top edge is 30 pixels below monk.gif's top edge.
(c) 186/right-x: the area rectangle's right edge is 186 pixels to the right of monk.gif's left edge.
(d) 98/bottom-y: the area rectangle's bottom edge is 98 pixels below monk.gif's top edge.
The coords="91,30 186,98" rectangle is approximately centered around the monk's head in the image:
There should actually be a comma between the 30 and 186 coordinates -
All [coords] values are separated by commas,the W3C informs us - but at least on my computer, the absence of this comma doesn't cause any problems. Moreover, the 91,30 186,98 coords value is not invalid vis-à-vis the (X)HTML DTDs. The coords attribute's data type designation is %Coords;, an entity reference whose replacement text is "CDATA", for which white space characters are OK, as noted in Blog Entry #120.
I trust we don't need to go over the href and alt attributes, which indicate that the coords="91,30 186,98" subregion links to the NFL's home page.
Per its shape attribute, the next area element defines a circular subregion. For shape="circle", the coords value should hold three coordinates:
coords="center-x, center-y, radius"
CDATA-wise, the coords="25,72 28,97" attribute is valid, but it has an extra coordinate. In the "Notes on invalid documents" section of the HTML 4.01 Specification, the W3C recommends,
If a user agent encounters an attribute value it doesn't recognize, it should use the default attribute value.Like most HTML attributes, the coords attribute has an #IMPLIED default value designation; for an #IMPLIED attribute,
the default value of the attribute is implicit...[and consequently] must be supplied by the user agent,although I have no idea what that value (if any) might be for the coords attribute.
The coords attribute is a presentational attribute of sorts in that it indirectly sets the dimensions (e.g., width and height) of an image-map subregion, and it occurred to me that the CSS 2.1 Specification might discuss image maps and address our wrong-number-of-coordinates situation, but alas, it does not.
Anyway, moving the mouse cursor over the monk.gif image in the tutorial does pick up a small http://www.cnn.com subregion in the image's upper-left quadrant, and I speculated, "Perhaps the browser is acting on the first three coordinates and ignoring the fourth coordinate," and this is evidently what happens in this case. So getting back to the above shape="circle" coords value, the first three coordinates of the coords="25,72 28,97" attribute have the following meanings:
(a-b) 25,72/center-x,center-y: the center of the area circle is 25 pixels to the right of monk.gif's left edge and 72 pixels below monk.gif's top edge.
(c) 28/radius: the area circle has a 28-pixel radius.
The coords="25,72,28" circle is approximately centered around the red apple (or whatever it is) in the image:
Note that a very small part of the circle is actually outside of the image. External-to-the-image parts of image-map subregions are not 'active': they don't link to their href destinations or do whatever else they're supposed to do.
Per the preceding discussion, the third-in-source-order area element defines a circular subregion whose center is 107 pixels to the right of monk.gif's left edge and 158 pixels below monk.gif's top edge, and whose radius is 132 pixels:
It's not quite clear what Joe was trying to do with this area element, which covers most of the image and extends 25 pixels to the left of the image's left edge and 35 pixels below the image's bottom edge. The area circle is centered on the cup in the monk's left hand, and the circle's 'right side' (the arc running clockwise from 12 o'clock to 6 o'clock) approximately traces the right-hand contour of the monk, so perhaps this area of the map is meant to be a 'catchall' that covers the remainder of the monk (recall that the monk's head is mapped by the 'NFL rectangle' described earlier), linking it to http://www.cbs.com. Unfortunately, the circle's large size - note that its diameter (264px) is larger than both the image width (262px) and height (255px) - causes it to override the next area element...
<!-- Yes, the href URL is a mistake - USA Today's home page is of course located at http://www.usatoday.com/. -->
The poly shape value is short for "polygonal", i.e., the area subregion is a polygon of some sort. For shape="poly", the coords value
coords="x1, y1, x2, y2, ..., xN, yN"
sequentially lists the (x,y) coordinates of adjacent vertices of the polygon (it should thus hold an even number of coordinates): the first vertex is located at (x1,y1), the next vertex is at (x2,y2), the next at (x3,y3), etc., going clockwise or counterclockwise around the polygon periphery. The coords="9,115 86,79 98,116 69,131 86,175 48,206" attribute defines an irregular, L-shaped hexagon whose coordinates are (9,115), (86,79), (98,116), (69,131), (86,175), and (48,206), and that approximately traces the book in which the monk is writing:
Let's take stock of where we are for a moment. The third area element completely blankets the fourth area element and largely overlays the first and second area elements:
The W3C importantly notes,
If two or more defined regions overlap, the region-defining element that appears earliest in the document takes precedence (i.e., responds to user input); consequently, the third area element will override the fourth area element but will not override the first and second area elements. Accordingly, if you run your mouse cursor over the monk's head, the apple, and the monk's writing book in the monk.gif image in the tutorial, you will respectively see http://www.nfl.com, http://www.cnn.com, and http://www.cbs.com (not http://www.cnn.com) in the browser window's status bar.
As you have probably figured out, preventing the third area element from overriding the fourth area element is a simple matter of switching the source order of these elements.
(5) <area shape="default" href="index.html">
By itself, a shape="default" area element would apply to the entire image; if present, it is placed last in a map element as a catchall for the parts of the image not covered by preceding area elements. Looking at the 'putting it all together' image above, we can easily identify the heretofore-unmapped image subregions (mostly adjoining the top and right edges, but don't miss the 'southwest corner') that this area element will link to http://www.htmlgoodies.com/index.html, the HTML Goodies home page. A shape="default" area element obviously does not need a coords attribute but should still hold an alt attribute (e.g., alt="HTML Goodies Home Page"), which is the one #REQUIRED attribute of the area element.
In the following entry, we'll discuss the use of anchor elements to define image-map subregions - depending on how long that takes, I may also next time follow through on my promise in the previous entry to "show you how to define image subregions via crosshairs and mouse [events]."
reptile7
- posted by A. Peak @ 2:57 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)