Feb01: Cross-Platform DHTML


<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_3.js'></script>
<script>
var objL1, objL2;
function init() {
    objL1 = new CSSObject('L1');
    objL2 = new CSSObject('L2');
    objL1.moveTo(0,150);
    objL2.moveTo(0,350);
}
function moveObj(obj) {
    obj.moveBy(10, 0);
    obj.moveBy(10, 0);
}
</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.<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)'>
</form>
</body>
</html>
Example 3: The DOM in its new altered state.

Back to Article