Uncle Jim's JavaScript Examples

MOVABLE OBJECTS

An object must have a position declaration in order to be moveable.
"position:relative" means that an object flows along with other objects in the normal way,
whereas "position:absolute" takes an object out of the browser's document flow scheme.
Uncle Jims Javascripts!

JavaScript Logo
This file shows the basics of moveable objects. The key points are:
1. The two moveable objects are an image (IMG) and a DIV containing some text.
2. Both objects have names, so that they can be referred to elsewhere (in this
case by the onClick event handling code in pushbuttons)
3. Both objects have in-line style sheets, which declare "position:relative".


The image and red text are relatively-positioned objects. Use the buttons to move the them around. The effect is the same as if you'd declared a relatively-positioned object with initial offsets (using the top and left STYLE attributes). The object will reflow if you resize the browser, but always leaves a 'hole' where it would naturally have been.

Move the picture up and down, and see how it interacts with the headline (Uncle Jim's JavaScripts!) and the red text. All three have z-index values of 'auto' (because I haven't specified any other value). The image slides over the headline because it was declared later in the HTML source, and slides under the red text because the red text was declared later. Why the image slides under the pushbuttons is anyone's guess! The image is a transparent GIF, and IE 4 maintains its transparent areas when it's sliding over other objects.