Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function init(){
document.getElementsByTagName('area')[0].onmouseover=function(){
document.getElementById('clock2').src='http://www.21-twelve.com/img/clockface_940x900_2.gif';
this.onmouseout=function() {
document.getElementById('clock2').src='http://www.21-twelve.com/img/clockface_940x900.gif';
}
}
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>
<div style="position:relative;width:940px;height:900px;" >
<img id="clock2" src="http://www.21-twelve.com/img/Clockface_940x900.gif" usemap="#clock_MapX" border="0" >
<img class="mask" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" usemap="#clock_MapX" style="position:absolute;left:0px;top:0px;width:940px;height:900px;border-Width:0px;">
</div>
<p class="center" id="logo">
<map name="clock_MapX">
<area shape="poly" coords="630,295,695,230,742,289,772,364,681,389" title="our_approach"
alt="our_approach" href ="approach.html" >
<area shape="circle" coords="100,100,50" title="our_approach"
alt="our_approach" href ="approach.html" onmouseover="alert('best to call a function\nto save a lot of code');" >
</map>
</body>
</html>
I have added a link that may be of interest
http://www.vicsjavascripts.org.uk/Ma...MapHiLight.htm
]