SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Time delay onmouseout

    I have a drop down menu system, however at the moment when you accidently leave the drop-down, it disappears straight away. I would like there to be a half a second delay before it goes away, any idea how I might add this to the onmouseout function?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TO must be global

    var TO;


    the mouseout function

    TO=setTimeout('obj.style.visibility=\'hidden\';',500)

    the mouseover function

    clearTimeout(TO);

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help. I found it a little confusing though, how do I put that into the html?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you had best post the menu you are using

  5. #5
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code:

    <a href="e-commerce" onmouseover="MM_swapImage('overview','','images/buttons/overview_on.gif',1);MM_showHideLayers('overviewnav','','show')" onmouseout="MM_swapImgRestore();MM_showHideLayers('overviewnav','','hide')"><img src="images/buttons/overview_off.gif" alt="Overview" width="97" height="24" id="overview" /></a>

    -----------------------

    Basically, I want a delay on:

    onmouseout="MM_showHideLayers('overviewnav','','hide')">

    What's the best way?

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this dreamweaver'? if so best to get a better menu

    but I have done this example

    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">
    <!--
    
    var Obj,TO;
    
    function VWP_swapImage(id,x,img){
     Obj=document.getElementById(id);
     Obj.outimg=Obj.src;
     Obj.src=img;
    }
    
    function VWP_swapImgRestore(){
     Obj.src=Obj.outimg;
    }
    
    function VWP_showHideLayers(id,x,state){
     clearTimeout(TO);
     MObj=document.getElementById(id);
     if (state=='show'){
      MObj.style.visibility='visible';
     }
     else {
      TO=setTimeout('MObj.style.visibility=\'hidden\';',500);
     }
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <a href="e-commerce"
    onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav','','show')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" id="overview" />
    </a>
    <div id="overviewnav" style="position:relative;width:100px;height:100px;background-color:red;"
    onmouseover="VWP_showHideLayers('overviewnav','','show')"
    onmouseout="VWP_showHideLayers('overviewnav','','hide')"
     ></div>
    </body>
    
    </html>
    there are pleanty of tool tips available

    one for starters http://www.vicsjavascripts.org.uk/Si...eTextPopUp.htm

  7. #7
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help vwphillips, I'm still having trouble with this. I'm trying to get a menu like that at http://www.truepresence.com, but my layers are overlapping because of the time delay.

    What can I do?

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    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">
    <!--
    // by Vic Phillips http://www.vicsJavaScripts.org.uk
    
    var Obj,TO;
    
    function VWP_swapImage(id,x,img){
     Obj=document.getElementById(id);
     Obj.outimg=Obj.src;
     Obj.src=img;
    }
    
    function VWP_swapImgRestore(){
     Obj.src=Obj.outimg;
    }
    
    function VWP_showHideLayers(id,obj,state,mess){
     clearTimeout(TO);
     MObj=document.getElementById(id);
     if (state=='show'){
      if (mess){
       MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
       mess=document.getElementById(mess).cloneNode(true);
       mess.removeAttribute('id');
       MObj.appendChild(mess);
      }
      if (obj){
       MObj.style.left=obj.offsetLeft+'px';
      }
      MObj.style.visibility='visible';
     }
     else {
      TO=setTimeout('MObj.style.visibility=\'hidden\';',500);
     }
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <a href="e-commerce"
    onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav',this,'hide')">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" id="overview" />
    </a>
    <a href="e-commerce"
    onmouseover="VWP_swapImage('overview1','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav',this,'hide')">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="overview1" width="97" height="24" id="overview1" />
    </a>
    <div id="overviewnav" style="position:relative;visibility:hidden;width:100px;height:100px;background-color:red;"
    onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
    onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
     ><div></div></div>
    
    <div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
    <div id="Mess1" style="position:absolute:top:0px;left:0px;" >Message 1</div>
    <div id="Mess2" style="position:absolute:top:0px;left:0px;" >Message 2</div>
    <div id="Mess3" style="position:absolute:top:0px;left:0px;" >Message 3</div>
    <div id="Mess4" style="position:absolute:top:0px;left:0px;" >Message 4</div>
    </div>
    </body>
    
    </html>

  9. #9
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks again for your help. I must be honest, I'm not too clever with javascript, and I'm having trouble working your example into the real thing.

    Here's the code:

    HTML Code:
    <div id="nav"><a href="index.html" onmouseover="VWP_swapImage('home','','images/buttons/home_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/home_off.gif" alt="Home" width="97" height="24" id="home" /></a><a href="e-commerce" onmouseover="VWP_swapImage('overview','','images/buttons/overview_on.gif',1);VWP_showHideLayers('overviewnav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"><img src="images/buttons/overview_off.gif" alt="Overview" width="97" height="24" id="overview" /></a><a href="demo" onmouseover="VWP_swapImage('demo','','images/buttons/demo_on.gif',1);VWP_showHideLayers('demonav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('demonav','','hide')"><img src="images/buttons/demo_off.gif" alt="Demo" width="97" height="24" id="demo" /></a><a href="signup" onmouseover="VWP_swapImage('signup','','images/buttons/signup_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/signup_off.gif" alt="Sign Up!" width="97" height="24" id="signup" /></a><a href="themall" onmouseover="VWP_swapImage('mall','','images/buttons/themall_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/themall_off.gif" alt="The Mall" width="97" height="24" id="mall" /></a><a href="contact" onmouseover="VWP_swapImage('contact','','images/buttons/contact_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/contact_off.gif" alt="Contact Us" width="99" height="24" id="contact" /></a></div>
      <div id="subnav">
        <div id="overviewnav" onmouseover="VWP_swapImage('overview','','images/buttons/overview_on.gif',1);VWP_showHideLayers('overviewnav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">Message</div>
    	<div id="demonav" onmouseover="VWP_swapImage('demo','','images/buttons/demo_on.gif',1);VWP_showHideLayers('demonav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('demonav','','hide')">message</div>
      </div>
    Could you possibly show me how to get 'overviewnav' and 'demonav' working properly? I really appreciate this, by the way.

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    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">
    <!--
    // by Vic Phillips http://www.vicsJavaScripts.org.uk
    
    var Obj,TO,MObj;
    
    function VWP_swapImage(id,x,img){
    return
     Obj=document.getElementById(id);
     Obj.outimg=Obj.src;
     Obj.src=img;
    }
    
    function VWP_swapImgRestore(){
    return
     Obj.src=Obj.outimg;
    }
    
    function VWP_showHideLayers(id,obj,state,mess){
     clearTimeout(TO);
     MObj=document.getElementById(id);
     if (state=='show'){
      if (mess){
       MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
       mess=document.getElementById(mess).cloneNode(true);
       mess.removeAttribute('id');
       MObj.appendChild(mess);
      }
      if (obj){
       MObj.style.left=(zxcPos(obj)[0])+'px';
       MObj.style.top=(zxcPos(obj)[1]+30)+'px';
      }
      MObj.style.visibility='visible';
     }
     else {
      TO=setTimeout('MObj.style.visibility=\'hidden\';',500);
     }
    }
    
    function zxcPos(zxc){
     zxcl=zxc.offsetLeft;
     zxct=zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcp=zxc.offsetParent;
      zxcl+=zxcp.offsetLeft;
      zxct+=zxcp.offsetTop;
      zxc=zxcp;
     }
     return [zxcl,zxct];
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <div id="nav" style="position:relative;" >
    <a style="position:relative;" href="index.html"
    onmouseover="VWP_swapImage('home','','images/buttons/home_on.gif',1)"
    onmouseout="VWP_swapImgRestore()">
    <img src="images/buttons/home_off.gif" alt="Home" width="97" height="24" id="home" />
    </a>
    <a style="position:relative;" href="e-commerce"
    onmouseover="VWP_swapImage('overview','','images/buttons/overview_on.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">
    <img src="images/buttons/overview_off.gif" alt="Overview" width="97" height="24" id="overview" />
    </a>
    <a href="demo" style="position:relative;"
    onmouseover="VWP_swapImage('demo','','images/buttons/demo_on.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">
    <img src="images/buttons/demo_off.gif" alt="Demo" width="97" height="24" id="demo" />
    </a>
    <a href="signup" style="position:relative;"
     onmouseover="VWP_swapImage('signup','','images/buttons/signup_on.gif',1)"
     onmouseout="VWP_swapImgRestore()">
    <img src="images/buttons/signup_off.gif" alt="Sign Up!" width="97" height="24" id="signup" />
    </a>
    <a href="themall"
    onmouseover="VWP_swapImage('mall','','images/buttons/themall_on.gif',1)"
    onmouseout="VWP_swapImgRestore()">
    <img src="images/buttons/themall_off.gif" alt="The Mall" width="97" height="24" id="mall" />
    </a>
    <a href="contact"
    onmouseover="VWP_swapImage('contact','','images/buttons/contact_on.gif',1)"
    onmouseout="VWP_swapImgRestore()">
    <img src="images/buttons/contact_off.gif" alt="Contact Us" width="99" height="24" id="contact" />
    </a>
    </div>
    
    <div id="overviewnav" style="position:absolute;visibility:hidden;width:100px;height:20px"
    onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
    onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
     ><div></div></div>
    
    <div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
    <div id="Mess1" style="position:absolute;top:0px;left:0px;width:100px;background-color:red;text-align:center;" >Message 1<br>Message 1<br>Message 1<br>Message 1</div>
    <div id="Mess2" style="position:absolute;top:0px;left:0px;width:200px;background-color:blue;text-align:center;" >Message 2</div>
    <div id="Mess3" style="position:absolute;top:0px;left:0px;" >Message 3</div>
    <div id="Mess4" style="position:absolute;top:0px;left:0px;" >Message 4</div>
    </div>
    
    There is only 'overviewnav' the content size color etc are changed by the Message &lt;DIV><br>
    
    http://www.sitepoint.com/forums/showthread.php?t=312597
    </body>
    
    </html>

  11. #11
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for this my friend, it means a lot. I'm nearly there now, however, with that last lot of code, the rollovers don't work. Any idea what the problem could be?

  12. #12
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function VWP_swapImage(id,x,img){
    //return
     Obj=document.getElementById(id);
     Obj.outimg=Obj.src;
     Obj.src=img;
    }
    
    function VWP_swapImgRestore(){
    // return
     Obj.src=Obj.outimg;
    }
    left the returns in by mistake

  13. #13
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, thanks a lot. The only problem I'm left with now is that the absolutely positioned layers appear further down in Firefox than in IE, any ideas?

    Thanks a lot. Again.

  14. #14
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    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">
    <!--
    // by Vic Phillips http://www.vicsJavaScripts.org.uk
    
    var Obj,TO,MObj;
    
    function VWP_swapImage(id,x,img){
     Obj=document.getElementById(id);
     Obj.outimg=Obj.src;
     Obj.src=img;
    }
    
    function VWP_swapImgRestore(){
     Obj.src=Obj.outimg;
    }
    
    function VWP_showHideLayers(id,obj,state,mess){
     clearTimeout(TO);
     MObj=document.getElementById(id);
     if (state=='show'){
      if (mess){
       MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
       mess=document.getElementById(mess).cloneNode(true);
       mess.removeAttribute('id');
       MObj.appendChild(mess);
      }
      if (obj){
       if (document.all){ // for IE
        MObj.style.left=(zxcPos(obj)[0])+'px';
        MObj.style.top=(zxcPos(obj)[1]+30)+'px';
       }
       else { // for most other browsers
        MObj.style.left=(zxcPos(obj)[0])+'px';
        MObj.style.top=(zxcPos(obj)[1]+30)+'px';
       }
      }
      MObj.style.visibility='visible';
     }
     else {
      TO=setTimeout('MObj.style.visibility=\'hidden\';',500);
     }
    }
    
    function zxcPos(zxc){
     zxcl=zxc.offsetLeft;
     zxct=zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcp=zxc.offsetParent;
      zxcl+=zxcp.offsetLeft;
      zxct+=zxcp.offsetTop;
      zxc=zxcp;
     }
     return [zxcl,zxct];
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <div id="nav" style="position:relative;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="Home" width="97" height="24" border="1" id="home"
     onmouseover="VWP_swapImage('home','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1)"
     onmouseout="VWP_swapImgRestore()"
     onclick="window.top.location=index.htm"
    />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" border="1" id="overview"
    onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Three.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"
     onclick="window.top.location=e-commerce.htm"
    />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Demo" width="97" height="24" border="1" id="demo"
    onmouseover="VWP_swapImage('demo','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"
     onclick="window.top.location=demo.htm"
     />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Sign Up!" width="97" height="24" border="1" id="signup"
     onmouseover="VWP_swapImage('signup','','http://www.vicsjavascripts.org.uk/StdImages/Three.gif',1)"
     onmouseout="VWP_swapImgRestore()"
     onclick="window.top.location=signup.htm"
     />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="The Mall" width="97" height="24" border="1" id="mall"
    onmouseover="VWP_swapImage('mall','','http://www.vicsjavascripts.org.uk/StdImages/Four.gif',1)"
    onmouseout="VWP_swapImgRestore()"
    onclick="window.top.location=themall.htm"
    />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Contact Us" width="99" height="24" border="1" id="contact"
    onmouseover="VWP_swapImage('contact','','http://www.vicsjavascripts.org.uk/StdImages/Five.gif',1)"
    onmouseout="VWP_swapImgRestore()"
    onclick="window.top.location=contact.htm"
    />
    </div>
    
    <div id="overviewnav" style="position:absolute;visibility:hidden;width:100px;height:20px"
    onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
    onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
     ><div></div></div>
    
    <div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
    <div id="Mess1" style="position:absolute;top:0px;left:0px;width:100px;background-color:red;text-align:center;" >Message 1<br>Message 1<br>Message 1<br>Message 1</div>
    <div id="Mess2" style="position:absolute;top:0px;left:0px;width:200px;background-color:blue;text-align:center;" >Message 2</div>
    <div id="Mess3" style="position:absolute;top:0px;left:0px;" >Message 3</div>
    <div id="Mess4" style="position:absolute;top:0px;left:0px;" >Message 4</div>
    </div>
    
    border size inclusion is differed between IE and most browsers,<br>
    additional code added so you can adjust manually<br>
    <br>
    also tidied the HTML a bit<br>
    http://www.sitepoint.com/forums/showthread.php?t=312597
    </body>
    
    </html>

  15. #15
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Vic, my only concern about the last code is that it wouldn't be search engine friendly, would it? Why can the buttons not be part of an <a>?

  16. #16
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all according on your priorities, code will work with either HTML

  17. #17
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Vic

    This might be a shot in the dark, but I'll try anyway. Can you possibly extend on this code to included a third sub level to show and hide off a link in the second level?

    thanks




    Quote Originally Posted by vwphillips View Post
    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">
    <!--
    // by Vic Phillips http://www.vicsJavaScripts.org.uk
    
    var Obj,TO,MObj;
    
    function VWP_swapImage(id,x,img){
     Obj=document.getElementById(id);
     Obj.outimg=Obj.src;
     Obj.src=img;
    }
    
    function VWP_swapImgRestore(){
     Obj.src=Obj.outimg;
    }
    
    function VWP_showHideLayers(id,obj,state,mess){
     clearTimeout(TO);
     MObj=document.getElementById(id);
     if (state=='show'){
      if (mess){
       MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
       mess=document.getElementById(mess).cloneNode(true);
       mess.removeAttribute('id');
       MObj.appendChild(mess);
      }
      if (obj){
       if (document.all){ // for IE
        MObj.style.left=(zxcPos(obj)[0])+'px';
        MObj.style.top=(zxcPos(obj)[1]+30)+'px';
       }
       else { // for most other browsers
        MObj.style.left=(zxcPos(obj)[0])+'px';
        MObj.style.top=(zxcPos(obj)[1]+30)+'px';
       }
      }
      MObj.style.visibility='visible';
     }
     else {
      TO=setTimeout('MObj.style.visibility=\'hidden\';',500);
     }
    }
    
    function zxcPos(zxc){
     zxcl=zxc.offsetLeft;
     zxct=zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcp=zxc.offsetParent;
      zxcl+=zxcp.offsetLeft;
      zxct+=zxcp.offsetTop;
      zxc=zxcp;
     }
     return [zxcl,zxct];
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <div id="nav" style="position:relative;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="Home" width="97" height="24" border="1" id="home"
     onmouseover="VWP_swapImage('home','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1)"
     onmouseout="VWP_swapImgRestore()"
     onclick="window.top.location=index.htm"
    />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" border="1" id="overview"
    onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Three.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"
     onclick="window.top.location=e-commerce.htm"
    />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Demo" width="97" height="24" border="1" id="demo"
    onmouseover="VWP_swapImage('demo','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
    onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"
     onclick="window.top.location=demo.htm"
     />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Sign Up!" width="97" height="24" border="1" id="signup"
     onmouseover="VWP_swapImage('signup','','http://www.vicsjavascripts.org.uk/StdImages/Three.gif',1)"
     onmouseout="VWP_swapImgRestore()"
     onclick="window.top.location=signup.htm"
     />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="The Mall" width="97" height="24" border="1" id="mall"
    onmouseover="VWP_swapImage('mall','','http://www.vicsjavascripts.org.uk/StdImages/Four.gif',1)"
    onmouseout="VWP_swapImgRestore()"
    onclick="window.top.location=themall.htm"
    />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Contact Us" width="99" height="24" border="1" id="contact"
    onmouseover="VWP_swapImage('contact','','http://www.vicsjavascripts.org.uk/StdImages/Five.gif',1)"
    onmouseout="VWP_swapImgRestore()"
    onclick="window.top.location=contact.htm"
    />
    </div>
    
    <div id="overviewnav" style="position:absolute;visibility:hidden;width:100px;height:20px"
    onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
    onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
     ><div></div></div>
    
    <div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
    <div id="Mess1" style="position:absolute;top:0px;left:0px;width:100px;background-color:red;text-align:center;" >Message 1<br>Message 1<br>Message 1<br>Message 1</div>
    <div id="Mess2" style="position:absolute;top:0px;left:0px;width:200px;background-color:blue;text-align:center;" >Message 2</div>
    <div id="Mess3" style="position:absolute;top:0px;left:0px;" >Message 3</div>
    <div id="Mess4" style="position:absolute;top:0px;left:0px;" >Message 4</div>
    </div>
    
    border size inclusion is differed between IE and most browsers,<br>
    additional code added so you can adjust manually<br>
    <br>
    also tidied the HTML a bit<br>
    http://www.sitepoint.com/forums/showthread.php?t=312597
    </body>
    
    </html>


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
  •