InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Client-Side Imagemaps

Once you have the coordinates written down, you're ready to create an HTML imagemap. Type the following just after the <body> tag in your Web page:

<map name="brainmap">

(You can use whatever name you want if brainmap doesn't describe the image you're using very well.)

Now you need to type an <area /> tag for each region of the image. Figure 14.6 shows how you would define the eight regions of the brain image.

Figure 14.6 The <map> and <area /> tags define the regions of an imagemap.

Each <area /> tag in Figure 14.3 has three attributes:

shape indicates whether the region is a rectangle (shape="rect"), a circle (shape="circle"), or an irregular polygon (shape="poly").
coords gives the exact pixel coordinates for the region. For rectangles, give the x,y coordinates of the top-left corner followed by the x,y coordinates of the bottom-right corner. For circles, give the x,y center point followed by the radius in pixels. For polygons, list the x,y coordinates of all the corners, in connect-the-dots order.
href specifies the page to which the region links. You can use any address or file name that you would use in an ordinary <a href> link tag.

After the <area /> tags, you are done defining the imagemap; insert a closing </map> tag.

To place the actual imagemap on the page, you use an ordinary <img /> tag and add a usemap attribute:

<img src="brain.gif" usemap="#brainmap">

Use the name you put in the <map> tag (and don't forget the # symbol). It is best to include width and height attributes for any image on a Web page.

Note

It is also possible to put the map definition in a separate file by including that file's name in the usemap attribute, like the following:

<img src="thisthat.gif" usemap="maps.htm#thisthat">

For instance, if you used an imagemap on every page in your Web site, you could just put the <map> and <area> tags for it on one page instead of repeating it on every page it appears.

Figure 14.7 shows the imagemap in action. Notice that Microsoft Internet Explorer displays the link address for whatever region the mouse is moving over at the bottom of the window, just as it does for "normal" links. If someone clicked where the mouse cursor (the little hand) is shown in Figure 14.7, the page named fantasy.htm would come up.

Figure 14.7 The imagemap defined in Figure 14.6 appears like this on the Web page.

Server-Side Imagemaps | Next Section

Previous Section