stacked layer/div with rollover and linking -- ??

deltatango5 · #1 (**permalink**) 06-07-07, 03:33 PM

Is there a way to create a simultaneous effect of both linking and onmouseover for two different layers that are stacked in the same position? Meaning ... I have LAYER 1 which would have the "initial image" and the "hot text" that would trigger a rollover (onmouseover) effect for the "new image" to repopulate the same position but in the same or "new" div ... onmouseout, the "new image" would hide and the "initial image and "hot text" div content would reappear ...

I've attempted something of what I wanted, but am still having issues. Any assistance you can provide would be greatly appreciated -- THANKS!

HTML Code:

<html>
<head>
<title></title>
<style type="text/css">
.hidden {position: absolute; visibility: hidden}
#netcalltext
{
z-index: 1;
position: absolute;
top: 2px;
left: 2px;
}

#d1
{
z-index: 2;
position: absolute;
top: 2px;
left: 2px;
}
</style>
<script language="JavaScript">
<!--
function showIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "visible";}
else
{if (document.layers)
{
document.layers[obj].visibility = "show";}
else
{document.all("d1").style.visibility = "visible";}
}
}
function hideIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "hidden";}
else
{if (document.layers)
{
document.layers[obj].visibility = "hide";}
else
{document.all("d1").style.visibility = "hidden";}
}
}
//-->
</script>
</head>
<body>
<div id="d1" class="hidden"><img src="images/tools-on.jpg" alt="" width="194" height="280" border="0"></div>
<div id="netcalltext"><a href="#" onMouseOver="showIt('d1')" onMouseOut="hideIt('d1')"><img src="images/tools-off.jpg" alt="" width="194" height="280" border="0"></a></div>
</body>
</html>

job0107 · #2 (**permalink**) 06-07-07, 08: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>