Thursday, July 31, 2008
Tales from Topographic Images, Side 1
Blog Entry #121
"Basic HTML: Images", the fifth of Joe Burns' original HTML primers, contains a section that discusses the "activation" of an image, i.e., turning an img element into a hyperlink by wrapping it in an anchor element:
<a href="http://www.htmlgoodies.com"><img src="homepage.gif" alt="Home"></a>
Image maps, our 'topic du jour' for the next few posts, are an extension of this basic concept. Instead of associating a link with an entire image (as the above code does), an image map defines subregions of an image and associates linking and/or other actions with those subregions.
Anatomy of an image map
An image map comprises a parent map element containing a series of area element or anchor element descendants.
The HTML map element has one #REQUIRED attribute, a name attribute that links the map to its image via the image's usemap attribute, as follows:
<img src="myImage.gif" alt="Alternate text" usemap="#myMap">
<map name="myMap"> ... </map>
More formally, for an img element and a map element to be coassociated, the img usemap and map name "fragment identifiers" (in the code above, myMap) must match. The usemap attribute value is actually a URL, and the map element is in effect the 'destination anchor' of that URL; when the browser hits the img usemap attribute, it will jump forwards or backwards to the map and then apply the map to the image. The img/map element order in the document source is thus unimportant, in much the same way that an <a name="myAnchor"> anchor can follow or precede an <a href="#myAnchor"> link.
Section 4.10 of the XHTML 1.0 Specification notes that XHTML 1.0 deprecates the name attribute of the map element, and that a corresponding id attribute should instead be used to link a map element to its associated img element.
According to its content model, the map element, which is itself an inline element, can have one or more block-level elements or area elements as immediate children:
<!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map -->
<!-- Regarding the map element content models in the XHTML DTDs (see here, e.g.), %block;, form, and %misc; add up to the same collection of elements that constitutes the %block; set of elements in the HTML DTDs. -->
This is why I used the word "descendants" earlier: in a valid document, a map element cannot have anchor element children. Look over the W3C's client-side image map examples - note that the anchor elements that define image subregions are all wrapped in p elements.
The area element and the anchor element share three key attributes that relate to the use of these elements in image maps:
(1) shape
(2) coords
(3) href
(Relatedly, you may know that classical JavaScript featured a client-side area object that was a type of link object.)
You know all about href; we'll flesh out shape and coords when we analyze an actual image map later.
Like the img element, the area element
(a) is a 'contentless' empty element, and thus its end-tag is "forbidden" in HTML, and
(b) has a #REQUIRED alt attribute for specifying alternate text, which evidently comes into play for non-visual browsers; at least on my computer, it's the img alt text, and not the area alt text, that is rendered if an image-map image is not available.
An example...
It's time we moved from theory to practice, wouldn't you say? Accordingly, let's turn now to HTML Goodies' "So You Want A Client-Side Image Map, Huh?" tutorial, which associates a monk.gif image
with the following map element:
<!-- This code and the image code in the next section have been taken from the tutorial source, not from the tutorial itself. -->
<map name="monkmap">
<area shape="rect" coords="91,30 186,98" href="http://www.nfl.com" alt="NFL Home Page">
<area shape="circle" coords="25,72 28,97" href="http://www.cnn.com" alt="CNN Home Page">
<area shape="circle" coords="107,158 132,162" href="http://www.cbs.com" alt="CBS Home Page">
<area shape="poly" coords="9,115 86,79 98,116 69,131 86,175 48,206" href="http://www.cnn.com" alt="USA TODAY Home Page">
<area shape="default" href="index.html">
</map>
<map name="monkmap">
<area shape="circle" coords="25,72 28,97" href="http://www.cnn.com" alt="CNN Home Page">
<area shape="circle" coords="107,158 132,162" href="http://www.cbs.com" alt="CBS Home Page">
<area shape="poly" coords="9,115 86,79 98,116 69,131 86,175 48,206" href="http://www.cnn.com" alt="USA TODAY Home Page">
<area shape="default" href="index.html">
</map>
The preceding code was not written 'from scratch' but was derived from an image map that Joe created with the Mapedit (not "MapEdit") image map editor program. Program?
In order to make a map, you need to go and get a map-making program. There's no way around it,Joe contends in the tutorial's "Let's Make A Map!" section. Maybe you'd need a specialized program for a complex image map, but for the simple map above, such a program is definitely not necessary - I'll show you how to define image subregions via crosshairs and mouse clicks in a subsequent post.
Regarding the "Let's Make A Map!" section's links, I should note before moving on that:
(1) The link to the Mac-ImageMap (not "Mac-Image-Map") program for the Macintosh is dead; however, I'm delighted to report that Mapedit now has a Mac version (but we still won't be using it).
(2) The
If these don't suit you, click Here to search [for] otherslink is also broken; however, the "Making the Map" section of HTML Goodies' related "So, You Want An Image Map, Huh?" tutorial provides the correct URL for this link, which is: http://dir.yahoo.com/Computers_and_Internet/internet/world_wide_web/imagemaps.
The image code
Before we get into the monkmap map element, let's take a look at Joe's code for the monk.gif image:
<a href="/legacy/tutorials/image_maps/monk.map">
<img src="/images/monk.gif" height="255" width="262" ismap usemap="#monkmap">
</a>
Upon reading the W3C's subsection on server-side image maps, it is clear that the preceding code originates from Joe's discussion of server-side image maps in the aforecited "So, You Want An Image Map, Huh?" tutorial.
• According to the W3C, for a server-side image map, the img element must have an anchor element parent with a href attribute that specifies the server destination to which the coordinates of the user's mouse clicks on the image will be sent.
• The W3C doesn't have much to say about the img element's Boolean ismap attribute other than that it
must be setfor an image associated with a server-side image map.
But we're (well, at least I'm) not interested in a server-side map - we want a map that can be rendered directly by the user's browser without having to horse around with a server. And for a client-side image map, the above anchor element wrapper* and img ismap attribute are excess baggage that should be thrown out.
(*http://www.htmlgoodies.com/legacy/tutorials/image_maps/monk.map is not a map file anyway - check its source.)
The monkmap map
Joe makes no effort to explain the monkmap map: he simply unloads the area shape and coords data on the reader and states,
The map program will tell you [what] all this [means].It thus falls to us to carry out a detailed dissection of the monkmap map - this could take a while, so let's leave it for the next post.
reptile7
- posted by A. Peak @ 2:55 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)