Jump to content


This topic is now archived and is closed to further replies.


Problem with Rollover Script

Recommended Posts

Good Evening Everyone,

Below is posted a script that I found on an online tutorial. I need to create a menu bar where when you rollover text a css layer appears and STAYS visible UNTIL your roll over another. The script allows them to become visible, but doesn't make the previous one disabled ie. I mouseover img1, txt 1 appears. I roll over img 2.. txt 2 appears and txt 1 should Dissapear.

Thanks in advance,

div.hidden_layer {
display: none;
speak: none;
div.visible_layer {
display: block;
speak: normal;

function doHoverText(sID) {
// sID is the ID of the layer we want to show.
// If no ID given, bail out:
if (!sID) return;
// Get a reference to the actuall layer:
var oLayer = (document.getElementById(sID)) ? document.getElementById(sID) : 'undefined';
// But bail out if the layer was not found:
if (!oLayer || oLayer=='undefined') return;
// Then show the layer we want:
oLayer.className = "visible_layer";

function doMouseOver(oImg, sID) {

<img src="image1.gif" onMouseOver="doMouseOver(this, 'changing_layer_1')">
<img src="image2.gif" onMouseOver="doMouseOver(this, 'changing_layer_2')">
<img src="image3.gif" onMouseOver="doMouseOver(this, 'changing_layer_3')">
... blah blah...
<div id="changing_layer_1" class="hidden_layer">Layer 1 ... blah blah...</div>
<div id="changing_layer_2" class="hidden_layer">Layer 2 ... blah blah...</div>
<div id="changing_layer_3" class="hidden_layer">Layer 3 ... blah blah...</div>

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.