3 a)
Develop and demonstrate, using Javascript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible.
<html>
<head>
<title>stacking</title>
<style type="text/css">
.layer1style{
border:solid thick orange;
padding:2em;
width:500px;
height:100px;
background-color:pink;
position:absolute;
top:300px;
left:250px;
z-index:0;
}
.layer2style{
border:solid thick white;
padding:2em;
width:600px;
height:100px;
background-color:blue;
position:absolute;
top:350px;
left:280px;
z-index:0;
}
.layer3style{
border:solid thick green;
padding:2em;
width:700px;
height:100px;
background-color:purple;
position:absolute;
top:400px;
left:310px;
z-index:0;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(toTop).style;
oldTop.zIndex="0";
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
}
</script>
</head>
<div style="z-index:1;" class="layer1style" id="layer1" onmouseover="mover('layer1','1')">
acer </div>
<div style="z-index:2;" class="layer2style" id="layer2" onmouseover="mover('layer2','2')" >
lenovo</div>
<div style="z-index:3;" class="layer3style" id="layer3" onmouseover="mover('layer3','3')">
HP</div>
</center>
</body>
</html>
No comments:
Post a Comment