Is it possible to have multiple image maps with multiple images on hover

DarrenHowes · 01-09-2013, 12:01 PM

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.

Code:

<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.

vwphillips · 01-09-2013, 05:18 PM

it can be done with one image map and changing the area calls

I could try and have a look tomorrow

DarrenHowes · 01-10-2013, 09:45 AM

Thanks very much Vic. This does seem to have stumped most coders from the 60 views and only 1 reply

vwphillips · 01-10-2013, 10:35 AM

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
]

DarrenHowes · 01-11-2013, 11:58 AM

Thanks Vic. It doesn't quite sort my problem out. I'm now 99% there and I'll post the coding I used next week when I've finalised the artwork