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" 
<AREA Shape="rect" Coords="25,180,125,280" 
<AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167" 
<AREA Shape="rect" Coords="420,19,478,278" Nohref>
<AREA Shape="circle" Coords="499,299,100" 
<AREA Shape="default" Coords="0,0,500,300" 

<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 for a tool for creating imagemaps.
Save this page to any social bookmarking site! Share · Search · Market · Directory
2015-11-01 · John December · Contact · Terms of Use © December Communications, Inc.