HTML and CSS Reference
In-Depth Information
EXAMPLE
12.8 (
CONTINUED
)
<area shape="rect" href="spring6.jpg" onclick=
"this.href='JavaScript:void(0)';this.disable=true" />
3
<area shape="default" href="spring1.jpg" />
</map>
</head>
<body>
<div align="center">
<h2>Spring in San Francisco</h2>
<img src="spring1.jpg" height=257 width=343
usemap="#my_image_map" />
<script type="text/javascript">
4
var lstr = "<ul>"; //
tag to create a bulleted list
var len = document.links.length - 1;
5
for ( var i = 1; i < len; i++ ){ //
Create links
lstr += "
<li>
<a href=" + document.links[i].href;
lstr += ">spring" + i +" </a>\n";
}
6
lstr += "</ul>";
7
document.write(lstr);
</script>
</div>
</body>
</html>
EXPLANATION
1
The image map starts here. It can be used to allow multiple links to be associated
with one image. For each HTML hyperlink created in the document, JavaScript
creates a corresponding links array, the first link being
links[0]
.
2
The links are deactivated to prevent the user from being surprised if he or she
clicks on one of the images. The disabled property of JavaScript is a Boolean prop-
erty; it can take two possible values:
true
, or
false
. The image map is used to create
links, shown under the picture, so that the user can click on one of the links and
be redirected to another image. The image map makes it possible to have one im-
age with multiple links, rather than a single link with a single image. Because
there will be no “hotspots” in this image, there is no need to use coordinates (see
Figure 12.15).
3
This is the image that is displayed on the screen.
4
The string
lstr
will contain a bulleted list of each hyperlink in the links array.
5
The
for
loop will cycle until all the links have been assigned to
lstr.
JavaScript
makes use of the
href
property of the link object to create the string.
6
The string of bulleted list items is completed with a closing
</ul>
tag.
7
When the list is displayed, it will consist of links to images associated with the
one originally displayed; that is, more images of spring in San Francisco (see
Figure 12.16).
