<html>
<head>
<title>Abakada CSS Demo: z-index Attribute</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
#img1, #img2 {
position: absolute; left: 0; top: 0; visibility: hidden;
border-radius: 18px; box-shadow: -4px 4px 6px gray; cursor: hand }
.z1 { z-index: 1 }
.z2 { z-index: 2 }
</style>
<script language="JavaScript" src="center.js"></script>
</head>
<body onload="center ( 'img1', 30, -120 ); center ( 'img2', 30, -120 )" onresize="setTimeout ( redraw, 1000 )">
<div class="header"><h2>Abakada CSS Demo: <b>z-index</b> Attribute</h2></div>
<hr size=1 width=92%>
<center>
<p id="msg">This example uses calls to an <i>embedded stylesheet</i> to dynamically set an element's <b>z-index</b> attribute.<br>
Click on the top image to bring the image underneath up. </p>
<img id="img1" src="/travel/images/banners/australasia 8.jpg" class="z1"
onclick="this.className='z1'; img2.className='z2'"
width=500 border=0 alt="">
<img id="img2" src="/travel/images/banners/australasia 9.jpg" class="z2"
onclick="this.className='z1'; img1.className='z2'"
width=500 border=0 alt="">
<div style="height:200pt" align="center"><p> </p></div>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>