Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

JavaScript & Layers

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

New User

10+ Year Member

joined:Dec 5, 2002
votes: 0

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;
} }

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

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

Senior Member

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

joined:Feb 25, 2002
votes: 0

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) {
timerID = null;
timerOn = false;

function hideAll() {
//Put all the layers in your menu system here
//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!

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

New User

10+ Year Member

joined:Dec 5, 2002
votes: 0

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

Thanks again