Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.
    Last edited by DarrenHowes; 01-09-2013 at 12:56 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    it can be done with one image map and changing the area calls

    I could try and have a look tomorrow
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very much Vic. This does seem to have stumped most coders from the 60 views and only 1 reply

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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
    ]
    Last edited by vwphillips; 01-10-2013 at 11:05 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •