<script language="JavaScript"><!--
var js = 1.0;

Version = parseInt(navigator.appVersion);

if (navigator.appName == "Netscape")
    js = ((Version >= 4) ? 1.2 : ( (Version == 3) ? 1.1 : 1.0 ));
else
    if (navigator.appVersion.indexOf('MSIE') != -1) 
        js = ((Version >= 4) ? 1.1 : 1.0);

function changeImagemap(newImage) {
    if (js > 1.0) document ['boxImage'].src = eval(newImage + ".src");
}

if (js > 1.0) {
    white = new Image();
    white.src  = "white.gif";

    red = new Image();
    red.src  = "red.gif";

    green = new Image();
    green.src  = "green.gif";

    blue = new Image();
    blue.src  = "blue.gif";
}

//-->
</script>
</head>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<center><h1>Highlighting Imagemaps</h1></center>
<p>This script works by using an imagemap that is swapped for another with an area highlighted when the mouse pointer passes over the map. Which image is loaded depends on the co-ordinates of the pointer. The images are pre-loaded, so there should be minimal delay in the images changing.</p>
<map name="image-map">
<area shape="RECT" coords="15,15,85,85" href="javascript:alert('Red Square')"
   onmouseover="changeImagemap('red');self.status='Red Square';return true"
   onmouseout="changeImagemap('white');self.status='';return true">
<area shape="RECT" coords="93,15,110,85" href="javascript:alert('Green Rectangle')" onmouseover="changeImagemap('green');self.status='Green Rectangle';return true" onmouseout="changeImagemap('white');self.status='';return true">
<area shape="CIRCLE" coords="150,50,35" href="javascript:alert('Blue Circle')"
   onmouseover="changeImagemap('blue');self.status='Blue Circle';return true"
   onmouseout="changeImagemap('white');self.status='';return true">
</map>
<center><img name="boxImage" src="white.gif" border=0 height=100 usemap="#image-map" width=200 align="center" alt="Imagemap"></center><hr>
