Most modern browsers support client-side image maps.

Here is an example client-side image map:

Image Map

In the HTML source, this client-side image map consists of two parts:

  1. The MAP and AREA elements to associate the image areas with URLs. The Name attribute of the MAP element names the image map.
  2. The IMG element to embed the image in the page with an Ismap attribute and the Usemap attribute set to the name of the image map.

Here's the key lines of the HTML to implement this:

<MAP Name="mymap"> 
<AREA Shape="circle" Coords="70,84,51" 
         Href="http://www.december.com"> 
<AREA Shape="rect" Coords="25,180,125,280" 
         Href="http://www.december.com/html/"> 
<AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167" 
         Href="http://www.december.com/works/tour.html"> 
<AREA Shape="rect" Coords="420,19,478,278" Nohref>
<AREA Shape="circle" Coords="499,299,100" 
         Href="http://www.cnn.com/">
<AREA Shape="default" Coords="0,0,500,300" 
         Href="http://www.december.com/john/"> 
</MAP>

<IMG Src="../images/imagemap.gif" Width="500" Height="300"
        Alt="Image Map" Usemap="#mymap" Ismap>

Notice that the image used here is a single graphics file. In the image, I associate each colored shape in the background to a different action. The blue circle is linked to my company home page. The HTML station box is linked to the index of that web. The green convex polygon is linked to my "tour page." The yellow "Blank Zone" rectangle is a "no link" image. The background is linked to my home page.

Notice how the sensitive spots change along the shape borders. I used a graphics tool to locate the coordinates of these shape borders.

You don't have to have a visual indication of a hotspot in an image map, of course. Check out the lower right hand corner of the image, directly under the "Blank Zone" rectangle. I've created a link there to the CNN Web site.

See the site image-maps.com for a tool for creating imagemaps.
Sponsor 
Coupon Codes save you money! You can find and use codes to get discounts on many purchases. See the big list of coupon codes on my site, where you'll find hundreds of special codes, from merchants of all kinds--books, music, clothing, supplies, and more!
 
Save this page to any social bookmarking site! Share · Search · Market · Directory
2012-07-27 · John December · Contact · Terms of Use © December Communications, Inc.