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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    area onMouseOver browser is giving me errors?

    I am trying to have a map of Australia and whenever the mouse goes over a state the image is replaced with another image which has that state highlighted and in bold and has a link with php info.

    I cant figure out where i'm going wrong, I have tried using code from various tutorials online but I cant seem to get it working.. can anyone help me?


    <html><head>
    <title>Test 1</title>
    <script language="javascript">

    function overState(state, on) {
    var ie = getEle('st_base_map');
    if (on == 1) {
    ie.src = '/images/map_' + state + '.gif';

    } else {
    ie.src = '/images/map_base.gif';
    }
    }

    function overStateTas(on) {
    var ie = getEle('st_base_map_tas');
    if (on == 1) {
    ie.src = '/images/map_tas.gif';
    } else {
    ie.src = '/images/map_tas_base.gif';
    }
    }

    </script></head>


    <body>
    <script type="text/javascript">
    var img_base = new Image();
    var img_vic = new Image();
    var img_nsw = new Image();
    var img_qld = new Image();
    var img_nt = new Image();
    var img_sa = new Image();
    var img_wa = new Image();
    var img_tas_base = new Image();
    var img_tas = new Image();

    img_base.src = '/images/map_base.gif';
    img_vic.src = '/images/map_vic.gif';
    img_nsw.src = '/images/map_nsw.gif';
    img_qld.src = '/images/map_qld.gif';
    img_nt.src = '/images/map_nt.gif';
    img_sa.src = '/images/map_sa.gif';
    img_wa.src = '/images/map_wa.gif';
    img_tas_base.src = '/images/map_tas_base.gif';
    img_tas.src = '/images/map_tas.gif';
    </script>

    <div style='position: absolute; z-index: 90; left: 320px; top: 65px'>
    <img id="st_base_map" src="images/map_base.gif" border="0" alt="" usemap="#map_base_Map">
    <map name="map_base_Map">
    <area onMouseOver="overState('nsw', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="247,176, 310,176, 320,169, 333,176, 337,176, 339,170, 350,170, 342,212, 323,253, 312,248, 306,239, 299,242, 282,236, 270,227, 264,226, 261,220, 251,220" href="index.php?state=nsw">
    <area onMouseOver="overState('vic', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="255,267, 257,260, 252,221, 260,221, 264,228, 269,228, 283,238, 299,243, 306,241, 311,249, 323,255, 317,262, 293,272, 270,271" href="index.php?state=vic">
    <area onMouseOver="overState('sa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="143,152, 242,145, 256,261, 253,267, 215,246, 176,211, 155,209" href="index.php?state=sa">
    <area onMouseOver="overState('qld', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="204,59, 218,54, 226,67, 231,5, 237,0, 346,136, 349,169, 337,169, 336,175, 331,174, 320,168, 308,175, 246,174, 242,144, 218,146" href="index.php?state=qld">
    <area onMouseOver="overState('nt', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="121,46, 121,12, 145,8, 189,16, 202,57, 216,146, 142,151" href="index.php?state=nt">
    <area onMouseOver="overState('wa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="3,142, 96,39, 119,50, 154,210, 69,264, 43,256, 4,180" href="index.php?state=wa">
    </map>
    </div><div style='position: absolute; z-index: 90; left: 635px; top: 338px'><img id="st_base_map_tas" src="images/map_tas_base.gif" width="79" height="44" border="0" alt="" usemap="#map_tas_base_Map">
    <map name="map_tas_base_Map">
    <area onMouseOver="overStateTas('1')" onMouseOut="overStateTas('0')" shape="poly" alt="" coords="6,2, 40,4, 53,23, 28,44, 17,44, 3,10" href="index.php?state=tas">
    </map>
    </div></div>

    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    have not checked the rest but you are missing

    Code:
    function getEle(id){
     if (document.getElementById){ return document.getElementById(id); }
     return document.all[id];
    }
    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
    Jun 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Thanks

    Thanks I tried using that and now when the mouse goes over the map it dissappears and doesnt come back..

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    this works so check your images
    Code:
    <html><head>
    <title>Test 1</title>
    <script language="javascript">
    
    function overState(state, on) {
     var ie = getEle('st_base_map');
     if (on == 1) {
      ie.src = 'http://www.vicsjavascripts.org.uk/StdImages/One.gif';
    
     } else {
      ie.src = 'http://www.vicsjavascripts.org.uk/StdImages/Two.gif';
     }
    }
    
    function overStateTas(on) {
    var ie = getEle('st_base_map_tas');
    if (on == 1) {
    ie.src = '/images/map_tas.gif';
    } else {
    ie.src = '/images/map_tas_base.gif';
    }
    }
    function getEle(id){
     if (document.getElementById){ return document.getElementById(id); }
     return document.all[id];
    }
    </script></head>
    
    
    <body>
    <script type="text/javascript">
    var img_base = new Image();
    var img_vic = new Image();
    var img_nsw = new Image();
    var img_qld = new Image();
    var img_nt = new Image();
    var img_sa = new Image();
    var img_wa = new Image();
    var img_tas_base = new Image();
    var img_tas = new Image();
    
    img_base.src = '/images/map_base.gif';
    img_vic.src = '/images/map_vic.gif';
    img_nsw.src = '/images/map_nsw.gif';
    img_qld.src = '/images/map_qld.gif';
    img_nt.src = '/images/map_nt.gif';
    img_sa.src = '/images/map_sa.gif';
    img_wa.src = '/images/map_wa.gif';
    img_tas_base.src = '/images/map_tas_base.gif';
    img_tas.src = '/images/map_tas.gif';
    </script>
    
    <div style='position: absolute; z-index: 90; left: 320px; top: 65px'>
    <img id="st_base_map" src="images/map_base.gif" border="0" alt="" usemap="#map_base_Map" width="300" height="300" >
    <map name="map_base_Map">
    <area onMouseOver="overState('nsw', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="247,176, 310,176, 320,169, 333,176, 337,176, 339,170, 350,170, 342,212, 323,253, 312,248, 306,239, 299,242, 282,236, 270,227, 264,226, 261,220, 251,220" href="index.php?state=nsw">
    <area onMouseOver="overState('vic', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="255,267, 257,260, 252,221, 260,221, 264,228, 269,228, 283,238, 299,243, 306,241, 311,249, 323,255, 317,262, 293,272, 270,271" href="index.php?state=vic">
    <area onMouseOver="overState('sa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="143,152, 242,145, 256,261, 253,267, 215,246, 176,211, 155,209" href="index.php?state=sa">
    <area onMouseOver="overState('qld', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="204,59, 218,54, 226,67, 231,5, 237,0, 346,136, 349,169, 337,169, 336,175, 331,174, 320,168, 308,175, 246,174, 242,144, 218,146" href="index.php?state=qld">
    <area onMouseOver="overState('nt', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="121,46, 121,12, 145,8, 189,16, 202,57, 216,146, 142,151" href="index.php?state=nt">
    <area onMouseOver="overState('wa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="3,142, 96,39, 119,50, 154,210, 69,264, 43,256, 4,180" href="index.php?state=wa">
    </map>
    </div><div style='position: absolute; z-index: 90; left: 635px; top: 338px'><img id="st_base_map_tas" src="images/map_tas_base.gif" width="79" height="44" border="0" alt="" usemap="#map_tas_base_Map">
    <map name="map_tas_base_Map">
    <area onMouseOver="overStateTas('1')" onMouseOut="overStateTas('0')" shape="poly" alt="" coords="6,2, 40,4, 53,23, 28,44, 17,44, 3,10" href="index.php?state=tas">
    </map>
    </div></div>
    
    </body>
    </html>
    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/


  •  

    Posting Permissions

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