[DarrenHowes]

Hi

Here is an example of how the clock looks.
http://www.21-twelve.com/althome.html

I have been asked to do what seemed like a very simple home page, but is actually a programming nightmare as I have not used much javascript before.

I have an old clockface with a digital countdown (which I created as an animated gif). I need several image maps so that when you highlight from 1 to 11. If you look at number 2 you can see an example of what should happen apart from the digital clock bit. The numbers are links to other pages. On hover they show an image outside the clock and the digital clock in the middle should change to 02:00.

So I need to have 12 image maps, and each image map should change the middle animated gif as well as show an image outside the clock next to the relevant number and also be a link to the new page.

The script I used for the number 2 is below.

<script type="text/javascript">


function init(){
document.getElementsByTagName('area')[0].onmouseover=function(){
document.getElementById('clock2').src='img/clockface_940x900_2.gif';
this.onmouseout=function() {
document.getElementById('clock2').src='img/clockface_940x900.gif';
}
}
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else { 
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>



<img id="clock2" src="img/Clockface_940x900.gif" usemap="#clock_Map2">
<p class="center" id="logo">
<map name="clock_Map2">

<area shape="poly" coords="630,295,695,230,742,289,772,364,681,389" title="our_approach"
        alt="our_approach" href ="approach.html">

</map>

Thanks for your help.