Welcome to WebmasterWorld Guest from 54.144.79.200

Forum Moderators: open

Message Too Old, No Replies

JavaScript & Layers

     

dcubed

8:38 am on Apr 11, 2003 (gmt 0)

10+ Year Member



I'm hoping I can find some help here. I'm putting together a "splash" or welcome page & the client would like a rollover menu effect when a viewer mouses over an image. I'm using Dreamweaver & created layers, put tables in the layers, created links, etc & everything was wonderful, until....

Layers are set to "hidden" & when you mouse over the graphic, they become visible. However, when you try to move the mouse to the menu, it moves off the graphic & layer becomes hidden. Not exactly the effect we were looking for...

Here's the code:

<script language="JavaScript">
<!--
function MM_showHideLayers() { //v2.0
var i, visStr, args, theObj;
args = MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) { //with arg triples (objNS,objIE,visStr)
visStr = args[i+2];
if (navigator.appName == 'Netscape' && document.layers!= null) {
theObj = eval(args[i]);
if (theObj) theObj.visibility = visStr;
} else if (document.all!= null) { //IE
if (visStr == 'show') visStr = 'visible'; //convert vals
if (visStr == 'hide') visStr = 'hidden';
theObj = eval(args[i+1]);
if (theObj) theObj.style.visibility = visStr;
} }
}
//-->
</script>

It's called by:

<img src="images/PSGroup72.GIF" width="200" height="94" border="0" onMouseOver="MM_showHideLayers('document.layers[\'regions\']','document.all[\'regions\']','show')" name="myclient" alt="Link to MyClientRegional Centres" onMouseOut="MM_showHideLayers('document.layers[\'regions\']','document.all[\'regions\']','hide')">

I'd like to put some sort of timer or delay into it so that the layer stays visible for a few seconds. Unfortunately, I speak Klingon better than I do JavaScript....can anyone out there lend a hand?

Many thanks

BlobFisk

9:24 am on Apr 11, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



If I read your post correctly, you are looking for a way to put a delay on the layer hiding after the user has moused out... you could add this:


var timerOn = false;
var timecount = 1000;

function startTime() {
if (timerOn == false) {
timerID=setTimeout( "hideAll()" , timecount);
timerOn = true;
}
}

function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
}

function hideAll() {
//Put all the layers in your menu system here
MM_showHideLayers(...,'hide')
MM_showHideLayers(...,'hide')
//And so on
}

The timecount is the delay you want. I have created a new function called hideAll(), this will hide all the menus that you specify (in the hide all function) after the set delay.

In your html you will need to add stopTime() to the mouseover, and startTime() to the mouseout of the appropriate sections (the link that spawns the menu and the menu layer itself).

HTH and shout if you need more clarificaction!

dcubed

11:23 pm on Apr 11, 2003 (gmt 0)

10+ Year Member



Many thanks for your help - I'll play with this & see what happens.

Thanks again

 

Featured Threads

Hot Threads This Week

Hot Threads This Month