HTML and CSS Reference
In-Depth Information
EXAMPLE
12.3 (
CONTINUED
)
</head>
<body>
<div align="center">
<h2>The Family</h2>
4
<img src="family.gif" usemap="#my_image_map" />
</body>
</html>
------------The file:
nicky.html
------------------------
<html>
<head><title>Nicky</title></head>
<body>
<script type="text/javascript">
var age = 14;
alert("Nicky, age "+ age);
5
window.location="example12.12.html";
</script>
</body>
</html>
EXPLANATION
1
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.
2
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).
3
The default represents the remaining area of the image not defined by any area
tags. It has no coordinates.
4
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.
5
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.
