<?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:20px;left:20px;}
#two{position:absolute;top:40px;left:40px;}
#three{position:absolute;top:60px;left:60p;}
#four{position:absolute;top:120px;left:120px;}
</style>
<script type="text/javascript">
var topLayer="four";
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>
<img id="one" src="11.jpg" onmouseover="movit('one')"/>
<img id="two" src="4.jpg" onmouseover="movit('two')"/>
<img id="three" src="6.jpg" onmouseover="movit('three')"/>
<img id="four" src="5.jpg" onmouseover="movit('four')"/>
</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:20px;left:20px;}
#two{position:absolute;top:40px;left:40px;}
#three{position:absolute;top:60px;left:60p;}
#four{position:absolute;top:120px;left:120px;}
</style>
<script type="text/javascript">
var topLayer="four";
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>
<img id="one" src="11.jpg" onmouseover="movit('one')"/>
<img id="two" src="4.jpg" onmouseover="movit('two')"/>
<img id="three" src="6.jpg" onmouseover="movit('three')"/>
<img id="four" src="5.jpg" onmouseover="movit('four')"/>
</body>
</html>