Jump to content


Photo

Problem with Rollover Script


  • Please log in to reply
No replies to this topic

#1 Mr.x

Mr.x
  • Members
  • PipPip
  • Member
  • 25 posts

Posted 06 July 2006 - 04:01 AM

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

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





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users