12.3 Working with Imagemaps An imagemap is an image with clickable areas where each area is represented by a link, also called a hotspot.. An imagemap makes it possible to make one image
Trang 112.3 Working with Imagemaps
An imagemap is an image with clickable areas where each area is represented by a link,
also called a hotspot An imagemap makes it possible to make one image link to several
pages depending on the area or pixel coordinate positions clicked by the user A simple
example would be an image of the map of the United States If the user clicks on Maine,
for example, then a link would navigate the user to another page with information about
that state, a closer image of the state, and so forth
In the HTML page you simply specify the area of the image (hotspot) and the link
that will be associated with that part of the image The most time-consuming and boring
part of this process is determining the coordinate positions for the hotspot This can be
done manually or by an image mapping program There are a number of programs on
the Web to help you (see Figure 12.6), and many are free In fact, most HTML editors
have image mapping as a built-in function (see Figures 12.7 and 12.8)
Figure 12.5 After clicking on a hyperlink: Output from Example 12.2.
Trang 2Figure 12.6 A free online image mapping tool.
Trang 3In Example 12.3, if you click on the face of any of the people in the family, you are
linked to a page with information about that family member In the HTML page the <area>
tag and its attributes represent the coordinates and the shape of the image map (see Table
12.5) as well as a link to the navigation page where the user will be directed when he or
she clicks on the hotspot Example 12.3 demonstrates how to create an image map
Figure 12.7 Using the tool to map a rectangular hotspot.
Figure 12.8 Using the image mapping tool to get the coordinates of the hotspot.
Coordinates are for the highlighted rectangular shape.
Trang 4In Example 12.3 the coordinates are plotted with rectangular image mappings, but
there are other shapes that can be used: the circle and polygon (The polygon shape can
be used to customize the area of the link.) Note: All coordinate values are relative to the
top left corner of the image (0,0)
Table 12.5 Shape Coordinates for an Imagemap
Shape Coordinates coords
Top left and bottom right corners of the rectangle.
Center and radius of the circle.
Corners of the polygon.
image, not defined by any coordinates.
E X A M P L E
<area shape=rect coords= x1,y1, x2,y2 href="http://www.domain.com">
<area shape=circle coords= x1,y1, x2,y2 href="http://www.domain.com">
<area shape=polygon coords= x1,y1, x2,y2, , xn,yn
href="http://www.domain.com">
E X A M P L E 1 2 3
<html>
<head><title>Using Links </title>
1 <map name="my_image_map">
2 <area shape="rect" href="nicky.html" coords="68,41,159,190">
<area shape="rect" href="daniel.html" coords="202,28,287,133">
<area shape="rect" href="jake.html" coords="273,20,358,125">
<area shape="rect" href="kimmy.html" coords="350,76,431,185">
<area shape="rect" href="uncledan.html"
coords="403,10,491,98">
<area shape="rect" href="jessica.html" coords="485,8,573,96">
3 <area shape="default" href="family.gif">
</map>
Continues
Trang 5</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>
E X P L A N A T I O N
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
E X A M P L E 1 2 3 (C O N T I N U E D)
Trang 6The user clicks his or her mouse on one of the faces and will be redirected to another
file (see Figure 12.10)
Figure 12.9 The image has hotspot areas defined for each of the family members.
Figure 12.10 User clicked the mouse on Nicky’s face A link to nicky.html is opened.
Trang 7By changing the value assigned to the src property of an image, it is possible to
dynam-ically replace one image with another You can create an array of images with the Array()
constructor, and assign any one of these images to the src property of the JavaScript
images[] array
E X A M P L E 1 2 4
<html>
<head><title>HTML Images</title>
<script type="text/javascript">
1 var myImages=new Array("baby1.jpg", "baby2.jpg",
"baby3.jpg", "baby4.jpg");
5 if (index_val < myImages.length){
6 document.images["babypic"].src = myImages[index_val];
// could say document.babypic.src or // document.images[0].src
}
index_val=0;
document.images["babypic"].src = myImages[index_val];
} }
index_val ;
9 if (index_val >= 0){
document.images["babypic"].src = myImages[index_val];
}
index_val=myImages.length - 1;
document.images["babypic"].src = myImages[index_val];
} }
</script>
</head>
<body>
<div align="center">
<h2>Baby Gallery</h2>
11 <img name="babypic" id="babypic" src="baby1.jpg"
width="329" height="440" >
<br />