delay onmouseOver help!

[toys19]

Hi
I am using onmouseOver to show layers, the onmouseOver is linked to an image, and I have found that whilst using the page it is easy and annoying to accidently activate this. So can I set a delay so that you can avoid the action occuring accidently?
I'm a bit of a newbie, my css and html is ok, but all my javascript has been automatically scripted onto my page by dreamweaver, please be gentle with me...

[jscheuer1]

The setTimeout() method is what you would want to use, but it's tricky. It would be far easier to advise you if we had a link to your page.

But let's just say you had something simple like so:

<img onmouseover="show('tip1');" src="some.gif">

It could be delayed by doing:

<img onmouseover="timer1=setTimeout(function(){show('tip1');}, 500);"
onmouseout="clearTimeout(timer1);" src="some.gif">

That would delay it by half a second, and cancel it if the mouse moved out before the time arrived. The 500 refers to milliseconds. But, as I say, it can get complicated, like if you need to pass variables, events, or event properties to the timeout function. Usually that type of code needs to go in one or more functions in the head of the page.

[toys19]

Hi Thanks for your reply. I appreciate you taking the time to help me.
Please see :www.silverarm.co.uk/index1.html to show what I am trying to achieve. Hover over the pictures.
I have tried to use the set time out function below, but it doesnt seem to work, all it does is disable the on mouseover event, I would really like to include the clearTimout command as well.. Do I need to do something to the Javascript in my header?
<div id="panelpic1"><a href="/DesignDevelopment/Mechanical/mechanical.html" onMouseOver="timer1=setTimeout(MM_showHideLayers('panelpiclarge1','','show');MM_showHideLayers('insert1','','show');MM_showHideLayers('insert4','','show');,500) ;" onMouseOut="MM_showHideLayers('panelpiclarge1','','hide');MM_showHideLayers('insert4','','hide');MM_showHideLayers('insert1','','hide')"><img src="/assets/sfcbodysmall.jpg" width="170" height="151" border="0"></a></div>

[jscheuer1]

Give this a shot:

<div id="panelpic1"><a href="/DesignDevelopment/Mechanical/mechanical.html"
onmouseover="timer1=setTimeout(function(){MM_showHideLayers('panelpiclarge1','','show');MM_showHideLayers('insert1','','show');MM_showHideLayers('insert4','','show');}, 500);"
onmouseout="clearTimeout(timer1);MM_showHideLayers('panelpiclarge1','','hide');MM_showHideLayers('insert4','','hide');MM_showHideLayers('insert1','','hide');">
<img src="/assets/sfcbodysmall.jpg" width="170" height="151" border="0"></a></div>

[toys19]

Jscheuer1 ! You are my new best friend!
Works perfectly.
Many thanks for your time and patience.

[Rob (SA)]

Hi Folks,

I have seen at this site

http://www.silverarm.co.uk/FailureAn...eanalysis.html

A similar idea that I would like to incorporate on my site. In that if you mouse over the pic it opens up lower down, larger and with some text.

I would like to generate an annual calendar with the same effect.

Instead of a visual picture I would see text (i.e JAnuary) and by mouse over it opens the month with all my events on it.

By clicking on January the frame will stay open.

I wonder if anyone can help /advise.

Kind Regards
Rob

[jscheuer1]

The site you mention has both images and text displayed onmouseover. Just get rid of the images.

[acan123]

Hi,

I'm also new to dhtml scripts, and to coding in general.

I have two separate menu items, called dotComSub1 and dotComSub2, each with its own subnavigation list items (see code below).

The first one (dotComSub1) works well, only it unintentionally opens up the subnav items as soon as the mouse passes over it.

The second one (dotComSub2) is an attempt to add in a time delay to the onmouseover, so that the subnav items appear only after the mouse is over for a given amount of time. However, the result I'm getting in both IE and Firefox is that when I hover over the top level item then the subnav items appear, but only as long as I don't move the cursor within the 'live' area. If I do move the cursor, even just a bit, then the subnav items disappear...and then they reappear when the cursor stops moving (all the while within the live area).

The other result of trying to set up this time delay for dotComSub2 is that when I try to move the cursor from the top level item into the subnav items I can't make it to the subnav items...again, because the subnav disappears.



Here's the code I'm using:


<div id="dotComSub1" onmouseover="showLayer1('dotComSubMenu1')" onmouseout="hideLayer1('dotComSubMenu1')"><img src="images/ClimbingWarehouseLogo.png"/>

<div id="dotComSubMenu1">
<div id="subLogo1"><a href="#"><img id="logoImage1" src="images/ClimbingWarehouseLogoBlue.png"/></a></div>
<ul id="dropDownList1">
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Carabiners</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Descenders</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Belay Devices</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Gloves</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Harnesses</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Helmets</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Rope</a></li>

</ul>
</div>

</div>




<div id="dotComSub2" onmouseover="timer2=setTimeout(function(){showLayer2('dotComSubMenu2');}, 375);" onmouseout="clearTimeout(timer2); hideLayer2('dotComSubMenu2')"><img src="images/TheatricalWarehouseLogo.png"/>

<div id="dotComSubMenu2">
<div id="subLogo2"><a href="#"><img id="logoImage2" src="images/TheatricalWarehouseLogoBlue.png"/></a></div>
<ul id="dropDownList2">
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Aircraft Cable</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Chain</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Clamps</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Fall Protection</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Roundslings</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Wire Rope</a></li>

</ul>
</div>

</div>



I also have the following in the javascript file:


function showLayer1 () {
document.getElementById("dotComSubMenu1").style.visibility="visible";
}
function hideLayer1 () {
document.getElementById("dotComSubMenu1").style.visibility="hidden";
}
function showLayer2 () {
document.getElementById("dotComSubMenu2").style.visibility="visible";
}
function hideLayer2 () {
document.getElementById("dotComSubMenu2").style.visibility="hidden";
}




Any assistance would be greatly appreciated!

Alex

[acan123]

Hi again,

As an addition to my earlier post I've also tried the following alternative code for dotComSub2:

<div id="dotComSub2" onmouseover="timer2=setTimeout(function(){showLayer2('dotComSubMenu2');}, 375);" onmouseout="timer2=setTimeout(function(){hideLayer2('dotComSubMenu2');}, 375);"><img src="images/TheatricalWarehouseLogo.png"/>

<div id="dotComSubMenu2">
<div id="subLogo2"><a href="#"><img id="logoImage2" src="images/TheatricalWarehouseLogoBlue.png"/></a></div>
<ul id="dropDownList2">
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Aircraft Cable</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Chain</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Clamps</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Fall Protection</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Roundslings</a></li>
<li class="dotComListItems"><a class="dotComListItemsText" href="#">Wire Rope</a></li>

</ul>
</div>



This makes it so that I can at least access the subnav items, and the subnav doesn't disappear anymore when I move the cursor over the top level item!

The only problem now is that even if I quickly pass across the top level item it still unintentionally brings up the subnav items...the only difference being that the subnav list blips on and immediately off at .375 sec after having swept across it.

What am I failing to see here?

Thanks,
Alex