Um im nächsten Teil Div-Blöcke in Bewegung setzen zu können,
müssen wir uns zuerst noch ein wenig mit der Positionierung von
Elementen beschäftigen.

Die wichtigsten Styleanweisungen dabei sind:

position="absolute";
z-index="0 -99"; 'gibt die Darstellungsebene an. Siehe auch CCS-Kurs, Positionieren
top="maß von oben"
left="maß von links"
height="Höhe des Blocks"
width="Breite des Blocks"

Ein kleines Beispiel zur Demonstration        (Hier klicken)

<html>
<head>
<title>Neue Seite 1</title>

<style type="text/css">
#fang     {     position:absolute;
                    top:0;
                    left:0;
                    height:100px;
                    width=100px; } 
</style>

<script language="JavaScript">
function init()
{
hoehe=document.body.offsetHeight;
breite=document.body.offsetWidth;
if (hoehe==0){hoehe=window.innerHeight};
if (breite==0) {breite=window.innerWidth}; 
}

function neupos()
{
x=Math.ceil(Math.random()*breite-100);
y=Math.ceil(Math.random()*hoehe-100);
if (x<0) {x=0; }
if (y<0) {y=0; }
elem=document.getElementById("fang");
elem.style.top=y;
elem.style.left=x;

</script>

</head>
<body
onLoad="init()">
<div id="fang"
onMouseOver="neupos()">
<img border="0" src="images/fang.gif">
</div>
</body>
</html>

Erklärung:
Ein Grafik wird in eine Dokument gebracht.
Die Grafik wird in einen Div-Tag gesetzt
Der Div-Tag ist über CCS in Position und Größe bestimmt.
<style type="text/css">
#fang     {     position:absolute;
                    top:0;
                    left:0;
                    height:100px;
                    width=100px; } 
</style>


Es gibt zwei javaScript Funktionen.
Die Funktion init() bestimmt die Größe des geöffneten Browserfensters.
Dazu gibt es leider ein Problem, Netscape verwendet hierzu eine andere Synatx als
der IE und Opera.

function init()
{
hoehe=document.body.offsetHeight; 
'Bestimmen der Höhe des Fensters  (IE und Opera)
breite=document.body.offsetWidth;   
'bestimmen der Breite des fensters (IE und Opera)
if (hoehe==0){hoehe=window.innerHeight}; 
' Falls der Wert 0 ist, dann wird mit Netscape gearbeitet
if (breite==0) {breite=window.innerWidth};  
' und die beiden Werte werden mit Netscape bestimmt.
}


Die Funktion neupos() berechnet mit dem Zufallsgenerator die neuen Werte
für top und left des DIV-Blockes.

function neupos()
{
x=Math.ceil(Math.random()*breite-100); 
'gibt eine Zufallszahl bis max. Breite des Fensters - Breite der Div-Blocks,
y=Math.ceil(Math.random()*hoehe-100); 
'gibt eine Zufallszahl bis max. Hoehe des Fensters . Hoehe des DIV-Blocks
if (x<0) {x=0; }   
'Kleiner als 0, dann wieder 0
if (y<0) {y=0; }   
'Falls kleiner als 0, dann wieder 0
elem=document.getElementById("fang"); 
'Zugriff auf den Div-Block wird geschaffen
elem.style.top=y;     
'neue Position von oben
elem.style.left=x;     
'neue Position von links  
}