<html>
<head>
<title>Abakada CSS Demo: zIndex Property</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
#img1, #img2 {
position: absolute; left: 0; top: 0; visibility: hidden;
border-radius: 12px; box-shadow: -4px 4px 6px gray; cursor: hand }
</style>
<script language="JavaScript" src="center.js"></script>
</head>
<body onload="center ( 'img1', 40, -120 ); center ( 'img2', 40, -120 )" onresize="setTimeout ( redraw, 1000 )">
<div class="header"><h2>Abakada CSS Demo: <b>zIndex</b> Property</h2></div>
<hr size=1 width=92%>
<center>
<p id="msg">This example uses <i>inline event handlers</i> to dynamically set an object's <b>zIndex</b> property.<br>
Click on the top image to bring the image underneath up.</p>
<img id="img1" src="/abkd/shared/images/samp03.jpg"
onclick="img1.style.zIndex=1; img2.style.zIndex=2"
width=200 border=0 alt="">
<img id="img2" src="/abkd/shared/images/samp14.jpg"
onclick="img1.style.zIndex=2; img2.style.zIndex=1"
width=200 border=0 alt="">
<div style="height:250" align="center"><p> </p></div>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>