HTML-CSS » On Mouse Over Varianten

Sie finden hier ein Beispiel für eine Einfache MouseOver- MouseOut-Efeckt, die sich auf ein bestimmtes Bild bezieht. Für den Austausch wird kurz und bündig lediglich die Adresse des 'Tauschbildes' im <.img>-Tag eingetragen.

Nun versuchen wir es mit einem DrachenKopf

Hinweis für JavaScript Anfänger!Hier werden zwei 'JavaScript Ereignis' verwendet,eigentlich heißen die Eventhandler.MouseOver=MausDrüber wird aktiv wenn der Mauszeiger über das Objekt bewegt wird, MouseOut=MausRaus tritt in Aktion, wenn der Mauszeiger aus dem Bereich heraus bewegt wurde.

Wenn der Browser den >HTML_Code< die Seite einliest, erstellt er ein Register eine Tabelle,in der Informationen für die Elemente der Seite gelistet sind.Auch die Datenquellen für eine verwendete Grafick ist dort Eingelistet.

>Image-Tag<

Als Referenz für die Datenquelle
>src< ist der Dateiname >blue.gif< eingetragen.
Dieses >src< ist das Einzige was sie hier verstehen müssen! Das, was dem Browser als Wert für >src< bekannt ist, wird als Datenquelle für die Anzeige verwendet.

In Antwort auf:
<img
src="blue.gif"
width="44" height="83" border="0" alt="Drachen-Blue">

Im internen Register des Browsers ist für dieses Image als Datenquelle >src< >blue.gif< eingetragen

>Image mit Mouse-Over-Effekt<

Schritt "1"

Wir erweitern das Image-Tag und tragen ein zusätzliches Attribut ein: >name<

name="test-name"

In Antwort auf:
<.img name="Test-name" src="blue.gif" width="44" height="83" border="0" alt="">

Das Bild links hat nun im internen Register des Browsers >in dem alle Seitenelemente stehen< nicht nur eine >laufende Nummer< sondern auch einen Namen.Den Namen legen sie selbst fest. Der Name sollte innerhalb der Seite nur einmal vorkommen. mann verwende Buchstaben,und keine Sonder oder Leerzeichenn.

Im internen Register des Browsers ist nun für das Image neben der Datenquelle >src< auch der Objektname >Test-name< vermerkt.

Schritt "2"

Nun tragen Wir eine weitere Anweisung ein die bewirkt,das sich bei MouseOver die Referenz >src< für das Bild mit dem Namen >Test-name< ändert.

onMouseOver="Test-name.src='red.gif'"

In Antwort auf:
<.img name="Test-name"
onMouseOver="Test-name.src='red.gif'"
src="blue.gif" width="44" height="83" border="0" alt="">

Das funktioniert schon ein mal, bei MouseOver wird das Bild
>einmalig< getauscht.
Vor dem MouseOver gilt für >grafik05< src="blue.gif"
Beim und nach dem MouseOver gilt für >grafik05< src='red.gif' Ergebniss

Im internen Register des Browsers ist für das Image mit dem Namen >Test-name< nach dem MouseOver nun die Datenquelle >red.gif< eingetragen.

Schritt "3"

Nun tragen wir eine weitere Anweisung ein die bewirkt, das sich bei MouseOut die Referenz >src< für das Bild mit dem Namen >Test-name< wiederum ändert.

<.img
name="Test-name"

onMouseOver="Test-name.src='red.gif'"

onMouseOut="Test-name.src='blue.gif'"

src="blue.gif" width="34" height="34" border="0" alt="">

Auch das funktioniert schon mal, bei MouseOut wird das Bild auch getauscht.
Vor dem MouseOver gilt für 'Test-name': src="blue.gif"

Beim MouseOver gilt für 'Test-name': src='red.gif'

Nach dem MouseOut gilt für 'Test-name': src='red.gif'

Ergebniss

Weil für das MouseOut-Ereignis die gleiche Bildquelle wie im Basis-Image-Tag eingetragen wurde, wird ja die ursprüngliche Grafik wieder angezeigt. Die beiden Bildwechsel erscheinen wie ein Hin- und Hertauschen.

Im internen Register des Browsers ist für das Image, abhängig von der Maus-Aktion, jedesmal die entsprechende Datenquelle vermerkt. Die Maus-Aktion überschreibt den alten Eintrag, der Browser organisiert den Update der Seite und zeigt das im Register eingetragene Bildchen an