3 b)
Modify the above 3(a) program so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom.
<html>
<head>
<meta http-equiv="content-type" content="text/html";charset="UTF-8">
<title>stacking</title>
<style type="text/css">
.layer1style{
border:solid thick orange;
padding:1em;
width:500px;
height:100px;
background-color:pink;
position:absolute;
top:220px;
left:250px;
z-index:0;
}
.layer2style{
border:solid thick white;
padding:1em;
width:600px;
height:100px;
background-color:blue;
position:absolute;
top:270px;
left:280px;
z-index:0;
}
.layer3style{
border:solid thick green;
padding:1em;
width:700px;
height:100px;
background-color:purple;
position:absolute;
top:320px;
left:310px;
z-index:0;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
var newTop=document.getElementById(toTop).style;
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
origPos=pos;
}
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origPos;
}
</script>
</head>
</a><br/>
<br>
<div style="z-index:1;" class="layer1style" id="layer1" onmouseover="mover('layer1','1')" onmouseout="moveBack()">
ACER</div>
<div style="z-index:2;" class="layer2style" id="layer2" onmouseover="mover('layer2','2')" onmouseout="moveBack()">
LENOVO </div>
<div style="z-index:3;" class="layer3style" id="layer3" onmouseover="mover('layer3','3')" onmouseout="moveBack()">
HP</div>
</body>
</html>
No comments:
Post a Comment