<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "_//w3c//DTD xhtml1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/html">
<head><title>Stacking of four paragraph</title>
<style type="text/css">
body
{
font-family:Times;
font-size:24pt;
}
#one{position:absolute;top:200px;left:300px;background-color:black;color:white;}
#two{position:absolute;top:220px;left:320px;background-color:cyan;color:black;}
#three{position:absolute;top:240px;left:340px;background-color:red;color:yellow;}
#four{position:absolute;top:260px;left:360px;background-color:green;color:orange;}
</style>
<script type="text/javascript">
var topLayer="three";
function movit(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>
<body>
<div id="one" onmouseover="movit('one')">
Apple may dominate<br/>
itv may take off in the market</div>
<div id="two" onmouseover="movit('two')">
Microsoft dominates<br/>
windows 8 is gettingpopular</div>
<div id="three" onmouseover="movit('three')">
google rocks<br/>
we all know that</div>
<div id="four" onmouseover="movit('four')">
web program rocks<br/>
we all know that</div>
</body>
</html>
<!DOCTYPE html PUBLIC "_//w3c//DTD xhtml1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/html">
<head><title>Stacking of four paragraph</title>
<style type="text/css">
body
{
font-family:Times;
font-size:24pt;
}
#one{position:absolute;top:200px;left:300px;background-color:black;color:white;}
#two{position:absolute;top:220px;left:320px;background-color:cyan;color:black;}
#three{position:absolute;top:240px;left:340px;background-color:red;color:yellow;}
#four{position:absolute;top:260px;left:360px;background-color:green;color:orange;}
</style>
<script type="text/javascript">
var topLayer="three";
function movit(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>
<body>
<div id="one" onmouseover="movit('one')">
Apple may dominate<br/>
itv may take off in the market</div>
<div id="two" onmouseover="movit('two')">
Microsoft dominates<br/>
windows 8 is gettingpopular</div>
<div id="three" onmouseover="movit('three')">
google rocks<br/>
we all know that</div>
<div id="four" onmouseover="movit('four')">
web program rocks<br/>
we all know that</div>
</body>
</html>