If you like working with animations, you'll be glad to know that with
DHTML, the entire web page is now your drawing board! You can create content
that fly all over the screen freely. In Netscape, this is done by manipulating
the left and top attributes of the <layer> tag. In IE 4, the same thing
is accomplished by altering the pixelLeft and pixelTop properties of the
style object.
-Moving elements in NS 4
Recall in lesson
2 that layers support the left and top property, which controls its
offset from the document's upper left corner. Well, by using simple math
and a couple of lines of script, we can dynamically update these properties
so the layer moves! The below example changes the left property of a layer
so it moves horizontally when a button is pressed.
kkk
<layer name="space" left=128>
<img src="TN00018A.gif">
</layer>
<script>
function moving(){
if (document.space.left<1000)
document.space.left+=5
moveid=setTimeout("moving()",50)
}
function come_back(){
clearTimeout(moveid)
document.space.left=128
}
</script>
<form>
<input type="button" value="Move"
onClick="moving()">
<input type="button" value="Come
back" onClick="come_back()">
</form>
See, all I did was continuously add to the left property of "space"
to move it, and set the property back to its original value when I want
the layer returned back to its initial location.
-Moving elements in IE 4
By the way, the day when NS and IE agree upon one implementation of
DHTML is the day I can stop writing two versions of everything (just letting
out a little frustration). Moving an element in IE 4 involves basically
first wrapping that element either inside a positioned span or div, then
changing the span or div's pixelLeft and pixelTop properties. It sounds
complicated, but is actually very simple:
<div id="spaceship" style="position:relative">
<img src="TN00018A.gif">
</div>
<script>
function moving2(){
if (spaceship.style.pixelLeft<1000)
spaceship.style.pixelLeft+=5
moveid2=setTimeout("moving2()",50)
}
function come_back2(){
clearTimeout(moveid2)
spaceship.style.pixelLeft=0
}
</script>
<form>
<input type="button" value="Move"
onClick="moving2()">
<input type="button" value="Come
back" onClick="come_back2()">
</form>
What I did first was set the outside <div> called "spaceship" to
a position of relative, which is necessary to make the element movable
(you could also set it to a value of "absolute"). Then, by manipulating
the pixelWidth property of it's style object, the element moves.
-Tutorial
Introduction
-What
is DHTML?
-DHTML
in NS- The <layer> tag
-DHTML
in IE 4
-Dynamic
Content
-Moving elements around in the document?
-Creating
cross-browser DHTML
-DHTML
resources
Discussion - Client Side Scripting
Moving elements around in the document