Most modern browsers support client-side image maps.
Here is an example client-side image map:
In the HTML source, this client-side image map consists of two parts:
- The MAP and AREA elements to associate the image areas with URLs. The Name attribute of the MAP element names the image map.
- 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="https://johndecember.com"> <AREA Shape="rect" Coords="25,180,125,280" Href="https://johndecember.com/html/"> <AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167" Href="https://johndecember.com/works/tour.html"> <AREA Shape="rect" Coords="420,19,478,278" Nohref> <AREA Shape="circle" Coords="499,299,100" Href="https://www.cnn.com/"> <AREA Shape="default" Coords="0,0,500,300" Href="https://johndecember.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.