SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    use onMouseOver to activate different image maps

    I have an image with links on it for my site. When I hover over the links, it loads another image below, with sub categories. Is it possible for the onMouseOver code to also activate an image map, so that the sub menu links are clickable? I need to have different image maps so that the hover areas correspond to the sections of the image

    I have the page uploaded http://www.stephenknox.com/newsite
    so you can see what I mean

    Thanks for any help
    Stephen

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try putting an Id to your different maps and disabling them or toggling them to display none or block ...

  3. #3
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply, but could you please be more specific on how to disable/enable the maps. I'm only starting out with js!

    Stephen

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function CngMap(id){
     mi=document.getElementById(id)
     imgs=mi.parentNode.getElementsByTagName('IMG');
     for (zxc0=0;zxc0<imgs.length;zxc0++){
      imgs[zxc0].style.zIndex=0;
     }
     mi.style.zIndex=1;
    
    }
    //-->
    </script></head>
    
    <body>
    <div style="position:relative;width:200px;height:200px;">
    <img id="MyImg1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=200 height=200 usemap="#map1" style="position:absolute;top:0px;left:0px;" >
    <img id="MyImg2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=200 height=200 usemap="#map2" style="position:absolute;top:0px;left:0px;" >
    </div>
    <map name="map1" >
    <area shape=rect coords="0,0,100,100" onmouseover="alert('map1');" >
    </map>
    <map name="map2" >
    <area shape=rect coords="100,100,200,200" onmouseover="alert('map2');" >
    </map>
    <br>
    <input type="button" name="" value="Use Map1" onclick="CngMap('MyImg1');">
    <input type="button" name="" value="Use Map2" onclick="CngMap('MyImg2');">
    </body>
    
    </html>

  5. #5
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats brilliant, thanks very much for your help


Bookmarks

Posting Permissions

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