Menu
I have the following code for stacking of elements and on putting the cursor over an elemnt that element comes to the top. Here is the code.. It is not working for some reason. The paragraphs are displayed, but on moving the mouse over them nothing happens.
<html>
<head>
<title>Stacking</title>
</script>
<style type="text/css">
.layer1Style
{
position: absolute;
top:50pt;
left:50pt;
background-color:red;
z-index:0;
}
.layer2Style
{
position: absolute;
top:75pt;
left:75pt;
background-color:green;
z-index:0;
}
.layer3Style
{
position: absolute;
top:100pt;
left:100pt;
background-color:blue;
z-index:10;
}
</style>
<script type="text/javascript">
var top="layer3";
function mover(newTop)
{
var oldTopStyle=document.getElementById(top).style;
var newTopStyle=document.getElementById(newTop).style;
oldTopStyle.z-index="0";
newTopStyle.z-index="10";
top=document.getElementById(top).id;
}
</script>
</head>
<body>
<div class="layer1Style" id="layer1" onmouseover="mover('layer1')">
<p>This is my first paragraph</p>
</div>
<div class="layer2Style" id="layer2" onmouseover="mover('layer2')">
<p>This is my second paragraph</p>
</div>
<div class="layer3Style" id="layer3" onmouseover="mover('layer3')">
<p>This is my third paragraph</p>
</div>
</body>
</html>
742
You cannot use z-index in JavaScript, because it's interpreted as z minus index. Use zIndex instead.
function mover(newTop)
{
var oldTopStyle = document.getElementById(top).style;
var newTopStyle = document.getElementById(newTop).style;
oldTopStyle.zIndex = "0"; // "zIndex", not "z-index"
newTopStyle.zIndex = "10"; // "zIndex", not "z-index"
top = document.getElementById(top).id;
}
(and also note that you cannot use top as a global variable, because it is already declared as a readonly property, window.top)
80
the code
top=document.getElementById(top).id;
should be
top = newTop;
and its
zIndex not z-index
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
