Hot Scripts Forums - View Single Post - stacked layer/div with rollover and linking -- ??

job0107 · #2 (**permalink**) 06-07-07, 07:35 PM

Well, I didn't put in support for all the browsers. But you can do that.

Here's how to do what you want to do.

HTML Code:

<html>
<head>
<title></title>
<style type="text/css">
.pos_abs{position: absolute;}
.obj_hide{display:none;}
.obj_show{display:block;}
.img{width:194px;height:280px;border:none;}
</style>
<script language="JavaScript">
<!--
function hideIt() {
document.getElementById("d1").style.display = "none";
document.getElementById("d2").style.display = "block";
}
function showIt() {
document.getElementById("d1").style.display = "block";
document.getElementById("d2").style.display = "none";
}
//-->
</script>
</head>
<body>
<div onmouseover="showIt();" onmouseout="hideIt();">
 <div id="d1" class="pos_abs obj_hide"><img class="img" src="images/tools-on.jpg" alt=""></div>
 <div id="d2" class="pos_abs obj_show"><a href="#"><img class="img" src="images/tools-off.jpg" alt=""></a></div>
</div>
</body>
</html>