Mouseover Erklärung 0
    
WWW.WEB-TOOLBOX.NET
QuellCode ZURÜCK  SITEMAP  

  Mouseover Erklärung 0 (simpel)


 Weil man immer bei Null anfangen soll: Sie finden hier ein Beispiel für eine simple MouseOver- MouseOut-Aktion, 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. Da geht's dann auch ohne Link (wenn sie wollen).

Tasse
 Wie wärs mit einem Tässchen Kaffee? Bevor ihre Tasse geleert ist, haben sie das MouseOver-Prinzip verstanden.

Vorher noch ein Hinweis für JavaScript-Beginner: Hier werden zwei 'JavaScript Ereignis-Manager' verwendet (ich nenne die mal so, 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 ein Browser den HTML-Code einer Seite einliest, erstellt er ein Register (eine Tabelle), in der Informationen für die Elemente der Seite gelistet sind. Auch die Datenquelle für eine verwendete Grafik ist dort notiert.






   Das ist bekannt: Ein übliches Image-Tag

Tasse
   Als Referenz für die Datenquelle (src) ist der Dateiname 'rot.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. 
<img src="rot.gif" width="34" height="34" border="0" alt="Tasse">
Im internen Register des Browsers ist für dieses Image als Datenquelle (src) 'rot.gif' eingetragen.







   Nun zur Erklärung: Image mit Mouse-Over-Effekt

Schritt 1

Wir erweitern das übliche Image-Tag und tragen ein zusätzliches Attribut ein: 'name' 

name="grafik05"
<img name="grafik05" src="rot.gif" width="34" height="34" border="0" alt="">

Tasse
   Das Bildchen links hat nun im internen Register des Browsers (in dem alle Seitenelemente stehen) nicht nur eine 'laufende Nummer' sondern auch einen Namen. Den Namen legte ich selbst fest. Der Name sollte innerhalb der Seite nur einmal vorkommen. Ich verwende Buchstaben, keine Sonder- oder Leerzeichen.


Im internen Register des Browsers ist nun für das Image neben der Datenquelle (src) auch der Objektname 'grafik05' vermerkt.





Schritt 2

Nun trage ich eine weitere Anweisung ein die bewirkt, das sich bei MouseOver die Referenz (src) für das Bild mit dem Namen 'grafik05' ändert. 
onMouseOver="grafik05.src='weiss.gif'"
<img name="grafik05"
onMouseOver="grafik05.src='weiss.gif'"
src="rot.gif" width="34" height="34" border="0" alt="">

   Das funktioniert nun schon, bei MouseOver wird das Bild (einmalig) getauscht.
Vor dem MouseOver gilt für 'grafik05': src="rot.gif"
Beim und nach dem MouseOver gilt für 'grafik05': src='weiss.gif'


Im internen Register des Browsers ist für das Image mit dem Namen 'grafik05' nach dem MouseOver nun die Datenquelle 'weiss.gif' eingetragen.






Schritt 3

Nun trage ich eine weitere Anweisung ein die bewirkt, das sich bei MouseOut die Referenz (src) für das Bild mit dem Namen 'grafik05' wiederum ändert. 
onMouseOut="grafik05.src='rot.gif'"
<img name="grafik05"
onMouseOver="grafik05.src='weiss.gif'"
onMouseOut="grafik05.src='rot.gif'"
src="rot.gif" width="34" height="34" border="0" alt="">

   Das funktioniert nun schon, bei MouseOut wird das Bild auch getauscht.
Vor dem MouseOver gilt für 'grafik05': src="rot.gif"
Beim MouseOver gilt für 'grafik05': src='weiss.gif'
Nach dem MouseOut gilt für 'grafik05': src='rot.gif'


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.





Das war der Bildtausch! Bisher noch ohne Link. Wie sie das nun mit einem Link kombinieren, lesen sie im übernächsten Abschnitt. Zwischendurch zur Auflockerung und zur Festigung des Verständnisses eine mögliche Variante.

Hat der Kaffee geschmeckt?




   Für Spielkinder ...

... und weil es möglich ist. Sicher ist ihnen auch schon der Gedanke gekommen: Hier wird für 'src' drei Mal eine Quelle angegeben. Bisher waren zwei identisch. Das muss nicht generell so sein. Versuchen wir doch einmal etwas Anderes. 
onMouseOut="grafik05.src='gruen.gif'"
<img name="grafik05"
onMouseOver="grafik05.src='weiss.gif'"
onMouseOut="grafik05.src='gruen.gif'"
src="rot.gif" width="34" height="34" border="0" alt="">

   Das funktioniert auch, es gibt nun einen 3. Status.
Vor dem MouseOver gilt für 'grafik05': src="rot.gif"
Beim MouseOver gilt für 'grafik05': src='weiss.gif'
Nach dem MouseOut gilt für 'grafik05': src='gruen.gif'





   Bild als Link - MouseOver-Image als Verweisfläche

Sie können jetzt um die so präparierte Grafik noch einen Link 'drum-herum-bauen'.

Dazu wird die Grafik von HTML-Tags für einen Verweis umschlossen. 

<a href="fenster.htm">   </a>

<a href="fenster.htm">

<img name="grafik05"
onMouseOver="grafik05.src='weiss.gif'"
onMouseOut="grafik05.src='rot.gif'"
src="rot.gif" width="34" height="34" border="0" alt="">

</a>

   Auch das funktioniert einwandfrei.





Eigentlich sind meine Erklärungen längst beendet und sie sollten schon auf einer anderen Seite sein oder ihr Wissen für die eigene Seite einsetzen. Wenn sie aber experimentierfreudig sind und ein wenig herumporbieren möchten ...




   Für schlimme Spielkinder ...

... und weil es möglich ist. Sicher ist ihnen auch schon der Gedanke gekommen: In der spielerischen Variante wurden drei unterschiedliche Quellen angegeben. Da könnte man doch noch eins drauflegen. Versuchen wir doch einmal etwas Neues. 
onMouseDown="grafik05.src='blau.gif'"
<img name="grafik05"
onMouseOver="grafik05.src='weiss.gif'"
onMouseOut="grafik05.src='gruen.gif'"
onMouseDown="grafik05.src='blau.gif'"
src="rot.gif" width="34" height="34" border="0" alt="">

   Das funktioniert auch, es gibt nun einen 4. Status.
Vor dem MouseOver gilt für 'grafik05': src="rot.gif"
Beim MouseOver gilt für 'grafik05': src='weiss.gif'
Nach dem MouseOut gilt für 'grafik05': src='gruen.gif'
Bei MouseDown gilt für 'grafik05': src='blau.gif'


Experimemtieren sie weiter: onMouseDown, OnClick, OnMouseUp

Gehen sie aber vorher zu Tschibo, das kann nun länger dauern. Und laden sie die Bildchen hier herunter. Viel Spaß

         








NACH OBEN