23. Clickable Image Maps

Make different parts of an inline image hyper-active with Client-Side Image Maps...

In lesson 7 we learned how to write the HTML to place an inline image in our page and in lesson 8 we saw how we could make the entire picture act as a hyperlink to some other related item. Since the early days of the web, there has been a way to have different parts of an inline image be hyperlinked-- known as a "clickable image map".

But until recently, the clickable image maps required that some things be processed from the web server. This is how it works:

1. Viewer sees page with clickable image map and... clicks on the part of it in the lower right hand corner.
2. Web browser says, "Hey! I got a mouseclick in this image! Gotta send a message to the web server- Someone clicked at these coordinates of this image."
3. The web server says."Hmmm. I got these coordinates for this image- The HTML file it was called from says look up the coordinates in this file... Okay, the file says, if the coordinates are in this rectangular region, then send the viewer to this URL" The server then returns this information to the web browser.
4. Web browser says,"Okay! The server said go to this URL- Let's go!"

This is a server-side process; one that was pretty efficient and a web server could handle it in a split second. But it meant that to use clickable image maps one always had to have access to a web server.

Spyglass was the first browser built with the capability to handle the calculations and transmit the proper URL based upon coordinates that were built inside the HTML for a page. This is a client-side process. That entire conversation above now takes place just between the browser and itself! For more information about image maps, see the Imagemap Help Page (IHiP).

The HTML needed for a client-side clickable image map is:

  <img src="image.gif" usemap="#map_name">

where image.gif is the file name of the image and map_name is an anchor link (see lesson 8) elsewhere in the same HTML file:

  <map name="map_name">
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
         :
         :
   </map>

Each line in the <map>...</map> tag identifies a different "hot" region, specified by the coordinates, coords=. x1,y1 are the horizontal and vertical pixel locations for the upper left corner (relative to the upper left corner of the entire image), while x2,y2 are the horizontal and vertical pixel locations for the lower right corner. URL1, URL2, ... are the URLs (or file names for local files) that the region should correspond to when clicked.

NOTE: To identify the coordinates for the hot region you will have to use some sort of graphics program. The Image Map Help Page or Yahoo lists several other utility programs that make this easy to do. For this lesson, we will be providing the exact coordinates for you.