Bringing Image Maps to the Client-Side
Last week we talked about server-side image maps,
discussing how to create the text document that divides images into regions, and links the regions to
specific URLs. But server-side image maps aren't exactly the most efficient solution: The map has to
download separately from the HTML file, and it's completely dependent on the server for translation.
But thanks to client-side image maps we can streamline network traffic a bit. All we have to do is port
the original map file into our HTML file, and most recent browsers (including Netscape 2.0+, Internet
Explorer 2.0+, OmniWeb 2.0+) can read them from there. We'll have to change the syntax a bit and place
the map components inside HTML tags, but overall it's not too tough.
As a recap, here's the line of HTML linking to our server-side map from last week.
<a href="/cgi-bin/imagemap/my_map.map">
<img src="my_image.gif" ismap width=160
height=140 border=0></a>
To make this link look around for a client-side map, just add the usemap="#foo_map" modifier
to its <img> tag.
<a href="/cgi-bin/imagemap/my_map.map">
<img src="my_image.gif" usemap="#my_image_map"
width=160 height=140 border=0 ismap></a>
In browsers that understand the usemap= modifier, the <img> tag will look
for a map file before it lets the <a href> look for one. Other browsers, however, will
ignore the usemap= modifier, read the ismap modifier, and go straight to the <a
href>. It's important to place the ismap modifier last, so that compliant browsers will
be sure to pick up usemap first.
Note that the URL we've selected with usemap="#my_image_map" starts with a hash mark ("#"). As the HTML 1.0 spec once
decreed, anything following a hash mark in a URL describes a specific anchor point within a file. So if we're
pointing to #my_image_map, then we're pointing to a map
within the current file.
So what do we have now? Well, we have a link to a client-side image map within our HTML file. You can
just think of it as a pointer, though, because the browser never even thinks about asking the server for an
extra file. No-sirree.
But we still need to port the map file itself into our HTML document. That amounts to transforming this
server-side map |
rect yellow.html 20,20 70,60
rect red.html 90,20 140,60
rect blue.html 20,80 70,120
rect green.html 90,80 140,120
default black.html
|
into this
client-side map |
<map name="my_image_map">
<area shape="rect" href="yellow.html" coords="20,20,70,60">
<area shape="rect" href="red.html" coords="90,20,140,60">
<area shape="rect" href="blue.html" coords="20,80,70,120">
<area shape="rect" href="green.html" coords="90,80,140,120">
<area shape="default" href="black.html">
</map>
|
Both types of image maps share a similar data structure, they just differ in
syntax: Instead of writing rect, you write shape="rect";
instead of writing green.html, you write href="green.html".
(Note that to remain compatible with 2.0 browsers, you must include the comma ","
between the coordinate pairs when creating a client-side image map). And both let
you monkey around with ovals,
polygons, points, and circles when you get bored with plain old rectangles.
Bandwidth issues aside, one significant advantage of client-side image maps is
that they allow users to preview URLs before following a link. In server-side
image maps, the status bar at the bottom of the browser only displays coordinate
points when the user mouses over the image. But client-side image maps
automatically display the target URL of the region the person's mousing over. Try
it out below, on last week's image map, ported to a client-side.
So where should you place the image map within your HTML file? To my knowledge, there's no definitive "best place" to include a <map> within your HTML file. I've seen people put them between </title> and </head>, between </head> and <body>, between </body> and </html>, and I've often seen them happily embedded within the <body> and </body> tags. This leads me to believe that <map> declarations can hide anywhere they please. It might help you to think of these regions of your HTML document as rebel bases, ideal perhaps for hiding a ragtag fleet of <area> tags.
That pretty much wraps up the client side of image maps. We're really just talking about two steps
here: Point to the map by including a usemap="#foo_map" in your image tag, and then reconstruct
the server-side map information to conform to <area> tag specs. And remember to be
kind to users of Lynx and other text-based browsers by providing alternate text links to the pages hidden
behind your image maps.