Changing Stacking Order in DHTML

Cats Eye Nebula
Cats Eye Nebula Crab Nebula
Crab Nebula Egg Nebula
Egg Nebula Eta-Carinae Supernova
Eta-Carinae Supernova

















The code is as shown below.

<HEAD>

<TITLE>Changing Stacking Order</TITLE>

<SCRIPT LANGUAGE="JavaScript" SRC="../include/browser.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

var currTop = 'element4';

function bringToFront (newTop)
{
	var domTop;
	var domNew;

	if (isNS4 || isIE4 || isNew)
	{
		domTop = eval (docObj + '.' + currTop + styleObj);
		domNew = eval (docObj + '.' + newTop + styleObj);
		domTop.zIndex = "1";
		domNew.zIndex = "4";
		currTop = newTop;
	}
}

</SCRIPT>

<STYLE TYPE="text/css">
	#element1 { position: absolute; top: 200px; left: 005px; z-index: 0; }
	#element2 { position: absolute; top: 210px; left: 155px; z-index: 1; }
	#element3 { position: absolute; top: 220px; left: 305px; z-index: 2; }
	#element4 { position: absolute; top: 230px; left: 455px; z-index: 3; }
</STYLE>

</HEAD>

<BODY>

<A HREF="../dhtmlidx.html">Dynamic HTML Index</A><BR><BR>

<SPAN ID="element1">
	<A HREF="#" onClick="bringToFront('element1');">
		<IMG SRC="../graphics/CatsEyeNebula.jpg" BORDER="0" ALT="Cats Eye Nebula"><BR CLEAR="all"> 
		<B>Cats Eye Nebula</B>
	</A>
</SPAN>

<SPAN ID="element2">
	<A HREF="#" onClick="bringToFront('element2');">
		<IMG SRC="../graphics/CrabNebula.jpg" BORDER="0" ALT="Crab Nebula"><BR CLEAR="all"> 
		<B>Crab Nebula</B>
	</A>
</SPAN>

<SPAN ID="element3">
	<A HREF="#" onClick="bringToFront('element3');">
		<IMG SRC="../graphics/EggNebula.jpg" BORDER="0" ALT="Egg Nebula"><BR CLEAR="all"> 
		<B>Egg Nebula</B>
	</A>
</SPAN>

<SPAN ID="element4">
	<A HREF="#" onClick="bringToFront('element4');">
		<IMG SRC="../graphics/EtaCarinaeSuperNova.jpg" BORDER="0" ALT="Eta-Carinae Supernova"><BR CLEAR="all"> 
		<B>Eta-Carinae Supernova</B>
	</A>
</SPAN>