 Objekt bewegen
 Bei einem MouseOver-Ereignis wird eine Ebene an eine andere X- Y-Position verschoben. Hier wurden 4 unterschiedliche Positionen festgelegt, die beim Überfahren des Objektes mit dem Mauszeiger nacheinander gültig werden.
 02.01.2008, funktioniert nun auch im FF, Mozilla NS6
MouseOver wird überwacht und das Objekt (hier eine Image) verschoben
Bei MouseOver wird die Position des Images neu bestimmt. Hier in diesem Beispiel wurden 4 alternative Positionen festgelegt, die nacheinaneder 'angesprungen' werden.
Fang mich mit der Maus !
Wie funktioniert das?
Innerhalb der Seite wurden 2 übereinander liegende Ebenen definiert. Inhalt der beiden DIV-Bereiche, deren Rangfolge mit z-index festgelegt ist, ist einmal der eigentliche Seiteninhalt (die Engländer sagen content) und zum andern das Objekt, das später bewegt werden soll.
DIV-Bereich für den Seiteninhalt: z-index:1
DIV-Bereich für den bewegten Inhalt: z-index:2
|
 |
Der DIV-Bereich mit dem höheren Indexwert liegt in der Darstellung über dem Div-Bereich mit dem niedrigerem Wert. Aus Sicht des Betrachters also vor dem Seiteninhalt.
Es gibt also zwei DIV-Bereiche:
a) den DIV-Berich für die eigentliche Webseite
b) den DIV-Berich für die zu bewegnede Ebene
Die zu bewegende Ebene (hier mit einem Bildchen als Inhalt) erhielt eine ID, mit der man dieses Qbjekt direkt 'ansprechen' kann.
<div id="springen">
<img src="kuh50.gif" onMouseover="bewegen()" ... >
</div>
In den CSS-Anweisungen wurde die Anfangsposition und der z-index Wert festgelegt.
#springen {
position:absolute;
top:220px;
left:280px;
z-index:2;
}
Weil mit dem Event-Handler 'MouseOver' der Bereich über dem Bildchen überwacht wird, kann ich nun eine Aktion auslösen, sobald der Mauszeiger sich über diesem Objekt befindet bzw. über das Objekt bewegt wird. Genau das geschieht hier:
Wenn der Mauszeiger sich über dem Bildchen befindet, dann 'tu was'!
<div id="springen">
<img src="kuh50.gif" onMouseover="bewegen()" ... >
</div>
Was soll getan werden? Eine JavaScript-Funktion soll aufgerufen werden und zwar die Funktion 'bewegen()'.
Die Funktion bewegen()
Das Objekt in der zu bewegenden Ebene erhielt innerhalb der CSS-Anweisungen die ID '#springen'. In der Funktion bewegen() stehen die Anweisungen, die X/Y-Position für das Objekt mit der ID neu zu bestimmen.
In meiner Funktion bewegen() wird eine Schleife durchlaufen, die nacheinander (jedesmal wenn die Funktion aufgerufen wird), eine von 4 Positionen für das Objekt neu festlegt. Daher beobachten sie auch die 4 unterschiedlichen Positionierungen für des Bildchen.
function bewegen()
{
if(zaehler == 1) {
springen.style.top = "175px";
springen.style.left = "200px";
}
if(zaehler == 2) {
springen.style.top = "100px";
springen.style.left = "190px";
}
if(zaehler == 3) {
springen.style.top = "220px";
springen.style.left = "50px";
}
if(zaehler == 4) {
springen.style.top = "220px";
springen.style.left = "350px";
}
// hier steht die Anweisung beim 5. mal von vorne zu beginnen
}
Das könnte man natürlich erweitern oder aber durch eine Berechnungsfunktion nach dem Zufallsprinzip festlegen lassen.
Eigenes Bild oder anderes Objekt einbinden
Wenn sie ihr eigenes Bildchen eintragen möchten, ändern sie die Notierungen im DIV-Bereich mit der ID 'springen', der in der Body-Sektion des HTML-Dokuments gleich hinter dem BODY-Tag eingetragen wurde.
Es muss übrigens nicht unbedingt eine Grafik sein! Ein Textlink oder eine kleine Tabelle ist ebenso denkbar.
HTML-Code im Body
<div id="springen">
Objekt mit 'OnMOuseOver-Anweisung' hier notieren
</div>
Den gesamten Code entnehmen sie bitte der Textdatei.
|
WWW.WEB-TOOLBOX.NET
Demo 
ZURÜCK 
