homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

JavaScript & Layers

10+ Year Member

Msg#: 357 posted 8:38 am on Apr 11, 2003 (gmt 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



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

Msg#: 357 posted 9:24 am on Apr 11, 2003 (gmt 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!


10+ Year Member

Msg#: 357 posted 11:23 pm on Apr 11, 2003 (gmt 0)

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

Thanks again

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved