Jump to content

Archived

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

Mr.x

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,
Sean

[code]
<style>
div.hidden_layer {
display: none;
speak: none;
}
div.visible_layer {
display: block;
speak: normal;
}
</style>

<script>
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) {
doHoverText(sID);
doHoverImage(oImg);
}

</script>
</head>
<body>
<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>
[/code]

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.