?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en">
<head>
<title>TITLE</title>
<style type="text/css">
</style>
</head>
<body>
<img src="planets.gif" id="planets" style="border:0;width:145px;height:126px" alt="Planets" usemap="#planetmap" />
<map name="planetmap" id="planetmap">
<area shape="polygon" coords="27,28,44,28,56,40,56,57,44,69,27,69,15,57,15,40" alt="Sun" href="sun.htm" />
<area shape="polygon" coords="119,49,127,48,133,53,133,61,128,66,121,67,115,62,115,55" alt="Venus" href="venus.htm" />
</map>
<script type="text/javascript">
var areas = document.getElementById('planetmap').getElementsByTagName('area');
var hotSpotsArray = ['sun', 'venus'];
function attachEvents()
{
for (var i=0; i<areas.length; i++)
{
attachImgMapEvents(i);
}
}
function attachImgMapEvents(num)
{
var imgMap = document.getElementById('planets');
areas[num].onmouseover = function()
{
imgMap.src = "planets_"+hotSpotsArray[num]+".gif";
};
areas[num].onmouseout = function()
{
imgMap.src = "planets.gif";
};
}
window.onload = attachEvents;
</script>
</body>
</html>
