SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover timeout

    Hi guys.

    First of all...the code:
    Code:
    THE MENU... 
    <td rowspan="3" style="border-bottom: 2px solid #FFFFFF;">
       <p class="indexnav">
          <a class="navitem" href="aboutef.php" onmouseover="document.rotImg.src=image1over.src">
             About Elim
          </a>
          <br />
          <a class="navitem" href="credentials.php" onmouseover="document.rotImg.src=image2over.src">
             Credentials
          </a>
          <br />
          <a class="navitem" href="usmd.php" onmouseover="document.rotImg.src=image3over.src">
             U.S. Ministries
          </a>
          <br />
          <a class="navitem" href="wmd.php" onmouseover="document.rotImg.src=image4over.src">
             World Missions
          </a>
          <br />
          <a class="navitem" href="publications.php" onmouseover="document.rotImg.src=image5over.src">
             Publications
          </a>
          <br />
          <a class="navitem" href="bullboard.php" onmouseover="document.rotImg.src=image6over.src">
             Bulletin Board
          </a>
          <br />
          <a class="navitem" href="contact.php" onmouseover="document.rotImg.src=image7over.src">
             Contact Elim
          </a>
          <br />
       </p>
    </td>
    Okay, here's the problem. I had a mouseout that I tried using both on each link. The problem is that the image would be reset to image0out.src (which is set in the head and is the default image showing on page load) on each link. Client felt it was too distracting to have the fill image flipping back and forth between links, so I took the mouseouts off. The problem now is there is no way to return to that image. I thought by putting the mouseout on the entire <td> it woul reset on the mouseout of the cell, but instead, it returns to changing the image back when I mouseoff each individiual link. So my second thought was to have a timeout where document.rotImg.src = image0out.src wouyld occur after 3 seconds of inactivity, but I don't know javascript very well. Can anyone help?

    Sketch
    Aaron Brazell
    Technosailor



  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Three seconds, eh?

    Well ... call a function onmouseout, on a timeout, and onmouseover set a variable true (but with a time).
    If you wanted to do it in a complex way, which will have fallovers for when you're over it and out, you could build it like this, which would leave room for more development:

    Code:
    <html>
    <head>
    
    
    <script langauge="JavaScript">
    
    var cond;
    
    function show(){
     cond=rDate();
     document.all.ref_img.innerHTML='open';
     }
    
    function Chide(){
     if (cond){
      if (rDate().split(/\|/)[0] != cond.split(/\|/)[0] || rDate().split(/\|/)[1]>cond.split(/\|/)[1]+3){
       document.all.ref_img.innerHTML='Closed [again]';
       }
      else {
       set Timeout('Chide()', 3000);
       }
      }
     }
    
    function rDate(){
     var d=new Date;
     return (d.getMinutes()+'|'+d.getSeconds());
     }
    
    </script>
    
    <style>
     SPAN { cursor: hand }
    </style>
    
    </head>
    
    <body>
    
    <span name="ref_img" id="ref_img" style="cusor:normal">Closed</span>
    <br><br>
    
    <span   onmouseover = "show();"
    	onmouseout  = "Chide();" >
    	First Element
    </span>
    <br><br>
    <span   onmouseover = "show();"
    	onmouseout  = "Chide();" >
    	Second Element
    </span>
    <br><br>
    <span   onmouseover = "show();"
    	onmouseout  = "Chide();" >
    	Third Element
    </span>
    
    </body>
    </html>
    let me know if there is anything more i can do to help you out on this.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simple approach,
    Code:
    <script language="JavaScript"><!--
    var timer;
    
    function clearTimer(){
    	clearTimeout(timer);
    }
    
    function swaptimer(){
    	document.rotImg.src = image0out.src;
    	clearTimer();
    }
    
    function swapback(){
    	clearTimer();
    	timer = setTimeout(swaptimer(), 3000);
    }
    
    //--></script>
    
    <table><tr>
    <td rowspan="3" style="border-bottom: 2px solid #FFFFFF;">
       <p class="indexnav">
          <a class="navitem" href="aboutef.php" onmouseover="swapback();document.rotImg.src=image1over.src">
             About Elim
          </a>
          <br />
          <a class="navitem" href="credentials.php" onmouseover="swapback();document.rotImg.src=image2over.src">
             Credentials
          </a>
          <br />
          <a class="navitem" href="usmd.php" onmouseover="swapback();document.rotImg.src=image3over.src">
             U.S. Ministries
          </a>
          <br />
          <a class="navitem" href="wmd.php" onmouseover="swapback();document.rotImg.src=image4over.src">
             World Missions
          </a>
          <br />
          <a class="navitem" href="publications.php" onmouseover="swapback();document.rotImg.src=image5over.src">
             Publications
          </a>
          <br />
          <a class="navitem" href="bullboard.php" onmouseover="swapback();document.rotImg.src=image6over.src">
             Bulletin Board
          </a>
          <br />
          <a class="navitem" href="contact.php" onmouseover="swapback();document.rotImg.src=image7over.src">
             Contact Elim
          </a>
          <br />
       </p>
    </td>
    </tr>
    </table>


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
  •