HTML Image Maps

Image maps provide a mechanism for providing clickable areas in an image. There are in fact two types of image maps - the, older, server-side map specification is best avoided since it creates additional server traffic. We only discuss client-side image maps.

Within a map we define clickable areas - the so called hot spots. Clicking on a hot spot invokes an action - such as loading another HTML page, calling a JavaScript function etc. In our example we have chosen to merely show a JavaScript alert since we did not want to have another page displayed while discussing image maps. There are three steps to using image maps

Creating a suitable image.
Defining a map - i.e., clickable areas, hot spots, within the image. It is possible to define three types of hot spot
- Rectangles: which require the X & Y coordinates of the top-left and bottom-right corners of the rectangle to be specified: X1,Y1 X2,Y2
- Circles: which require the X & Y coordinates of the center and its radius to be specified: X,Y r.
- Polygons: which require the X & Y coordinates of each vertex of the polygon to be specified X1,Y1 X2,Y2...Xn,Yn
The simplest way of establishing coordinate values is by opening the image file in Windows Paint, mspaint.exe, and hovering the mouse pointer over each relevant corner. The corresponding coordinates will appear in the bottom right hand corner of the status bar. For improved accuracy this should be done at the highest "zoom" level that is practicable.
Creating an image HTML element and instructing it to use a named map element defined on the same page.

The code used to create the image map on this page is shown below.

<html>
   <head>
   </head>
   <body>
      <map name="shapes">
         <area shape="rect"  href="javascript:alert('I am a rectangle')" coords="11,20 107,78">
         <area shape="circle"  href="javascript:alert('I am a circle')" coords="162,116 41">
         <area shape="poly"  href="javascript:alert('I am a polygon')" coords="204,30 251,22 274,43 258,78 221,85">
      </map>
      <img usemap="#shapes" src="/images/immap.png" border="0">      
   </body>
<html>

There are several additional points worthy of note

XHTML requires an id attribute for the map element in place of the name attribute.
In the interests of good practice you should specify the alt attribute for each area in the map so something useful shows up even when the image cannot be loaded.
It is also possible to specify the target attribute for each area to determine just how a new HTML page will be displayed. The more useful settings for this attribute are discussed here.

▼Jump To...

◄ ►