Question

I am trying to have a window display when the mouse is hovered over an image for 2 seconds or more, of course if the user does not hover for at least 2 seconds I do not want the window to be displayed.

Below is a snippet of the code that I used. As the code is now the window shows up at two seconds regardless of how long the user hovered over the image. I am trying to get something similar to the delayed hover effect in Netflix. I am sure I am going about it all wrong. So thanks in advance for your help.

<img name="img4" onMouseOver="WindowDelay(this);" onmouseout="closeDetails();" 
        src="images/MyImage.jpg" height="240" width="166"/>

<script language="JavaScript" type="text/javascript">
       var countTime = 0;
       var windowTimer = null

       function WindowDelay(thatImg)
       {
            windowTimer = window.setInterval(function() {countT(thatImg);}, 1000);
       }   

       function countT(thatImg)
       {
            countTime++;

            if (countTime == 2)
            {
                openDetails(thatImg);
                clearInterval(windowTimer);
                countTime = 0;
            }

        }
</script> 

Answer 1

When the mouse goes over the element, use setTimeout to open the window in two seconds. If the user mouses off of the element, use clearTimeout to stop the future window opening.