<html>
<head>
<style>
#L1 {position: absolute; left: 0px; top: 0px; z-index: 2;}
#L2 {position: absolute; left: 0px; top: 0px; z-index: 1;}
</style>
<script language='javascript' src='listing_1.js'></script>
<script language='javascript' src='listing_2.js'></script>
<script language='javascript' src='listing_3.js'></script>
<script>
var objL1, objL2;
function init() {
objL1 = new CSSObject('L1');
objL2 = new CSSObject('L2');
objL1.moveTo(0,150);
objL2.moveTo(0,250);
}
function moveObj(obj) {
obj.moveBy(10, 0);
obj.moveBy(10, 0);
}
function changeLayer(cssObj) {
cssObj.write("an <b>Image</b> use to be here!!");
}
</script>
</head>
<body onload='init()'>
<div id='L1'><img name='Img1' src='Image1.gif'></div>
<div id='L2'><img name='Img2' src='Image2.gif'></div>
This script should work with IE4, IE5, Nav4, and Nav5 (including Mozilla)<p>
Click the buttons below to move the images.<br>
<form><input type='button' value='move 1' onClick='moveObj(objL1)'>
<input type='button' value='move 2' onClick='moveObj(objL2)'><br>
<a href="javascript:changeLayer(objL1)">change 1</a>
<a href="javascript:changeLayer(objL2)">change 2</a><br>
<a href="javascript:showDOM()">showDOM()</a>
</form>
</body>
</html>
Example 5: Implementing the function changeLayer().
Back to Article