HTML and CSS Reference
EXAMPLE 12.3 ( CONTINUED )
<img src="family.gif" usemap="#my_image_map" />
------------The file: nicky.html ------------------------
var age = 14;
alert("Nicky, age "+ age);
The HTML <map> tag defines the client-side image map. The name attribute is re-
quired to make an association with the name and the usemap attribute of the image.
See line 4. In this definition, you tell the browser where the hotspots are in the im-
age, and what the hotspots need to link to.
The <area> tag defines the hotspot for a rectangular shape; that is, the top left and
bottom right corners of the rectangle. The rectangular shape for each area of the
map is drawn around each of the family members in the picture (see Figure 12.9).
The default represents the remaining area of the image not defined by any area
tags. It has no coordinates.
This is the image that will be displayed on the screen. The attribute use-
map=“#my_image_map” attribute associates the image map with this image. The
image map could also be placed in another file as usemap=“image-
file.map#my_image_map” where “imagefile.map” is the name of a file that de-
fines the areas.
When the user clicks on the area around the image of the girl at the far left, the
link goes to this page, nicky.html. After displaying information about Nicky, the
user is directed back to the original page.