<html>
<head>
<title>JavaScript Demo Example 5 Alternate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers
if(document.images) {
// load images for faster display
north_america = new Image();
north_america.src = "north_america.gif";
alaska = new Image();
alaska.src = "alaska.gif";
canada = new Image();
canada.src = "canada.gif";
continental_us = new Image();
continental_us.src = "continental_us.gif";
greenland = new Image();
greenland.src = "greenland.gif";
mexico = new Image();
mexico.src = "mexico.gif"; }
function change_NA_map(image_name) {
if (document.images) { document.north_america.src = image_name; }
}
function reset_NA_map() {
if (document.images) { document.north_america.src = "north_america.gif"; }
// Could not have used: document.north_america.src = north_america.src
// because north_america.src is replaced with different images in change_NA_map()
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h3>Pass the mouse pointer over regions within a map to display different
images.
<a href="example_5_html.htm">View source.</a></h3>
<table>
<tr>
<td> <IMG SRC="north_america.gif" USEMAP="#north_america_map" NAME="north_america"
alt="North America" width="185" height="242">
<MAP NAME="north_america_map">
<area shape="poly" coords="50,63,63,45,59,35,44,33,12,50" HREF="#"
onMouseOver="change_NA_map('alaska.gif')"
onMouseOut = "reset_NA_map()"
onClick="return false" alt="Alaska" title="Alaska">
<area shape=poly coords="113,8,144,22,152,60,107,31" HREF="#"
onMouseOver = "change_NA_map('greenland.gif')"
onMouseOut = "reset_NA_map()"
onClick="return false" alt="Greenland" title="Greenland">
<area shape=poly coords="62,45,107,23,162,86,148,104,143,99,125,111,115,100,105,105,55,96,49,64"
HREF="#"
onMouseOver = "change_NA_map('canada.gif')"
onMouseOut = "reset_NA_map()"
onClick="return false" alt="Canada" title="Canada">
<area shape=poly coords="60,96,105,105,115,100,125,111,143,99,134,153,97,153,62,137,50,118"
HREF="#"
onMouseOver = "change_NA_map('continental_us.gif')"
onMouseOut = "reset_NA_map()"
onClick="return false" alt="Contigous 48 states" title="Contigous
48 states">
<area shape=poly coords="61,135,122,165,109,183,65,159,60,136" HREF="#"
onMouseOver = "change_NA_map('mexico.gif')"
onMouseOut = "reset_NA_map()"
onClick="return false" alt="Mexico" title="Mexico">
</MAP>
</td>
<td>
<p>Client-side image maps store the hyperlink information in the HTML
document,
not in a separate map file as do server-side image maps. When the user
clicks a hotspot in the image, the associated URL is sent directly to
the server. This makes client-side image maps faster than server-side
image maps, because the server does not need to interpret where the user
clicked. Client-side image maps are supported by Netscape Navigator 2.0
and later, NCSA Mosaic 2.1 and 3.0, and all versions of Microsoft Internet
Explorer.</p>
</td>
</tr>
</table>
<p> </p>
<p><a href="JavaScriptDemo.htm">Return to Having Fun with JavaScript</a>.</p>
</body>
</html>