Electric Type


About Us



Client-Side Image Maps
by Patrick Corcoran 2 Oct 1996

Patrick Corcoran is director of interface and design for Activespace. In his spare time, he has been known to Hunt the Wumpus (using nothing but JavaScript).

Page 1

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">

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.

Dynamic HTML  


HTML Basics  





Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!


© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.