JavaScript & Layers

[dcubed]

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]

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]

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

Thanks again