 ImageChange (Bildwechsel) bei MouseOver
Sie finden hier den, wie ich nun feststelle, ziemlich langatmigen Erklärungsversuch für eine MouseOver- MouseOut-Aktion, die sich auf ein winziges Bildchen bezieht. Viel Aufwand für so ein kleines Image.
Kompliziert und aufwändig ist dieser Bildwechsel nur, weil hier der Austausch über den Objektnamen der Bilder organisiert wird. Hier wird nicht kurz und bündig lediglich die Adresse des 'Tauschbildes' im Link eingetragen, sondern das 'Tauschbild' als Objekt der HTML-Seite mittels JavaScript-Eventhander angesprochen. Das ist zwar OK und auch normalerweise üblich, für ein einiges kleines Bildchen gibt es aber eine simplerere Lösung. Wenn sie es sich antun wollen, lesen sie weiter. Falls nicht:  MouseOver-Erklärung 0 (simpel)
 22.06.2007
Erstmal den üblichen Image-Verweis
Hier lautet die Anweisung:
1) Beim Klicken auf das Image
a) öffne die Datei im Verweis oder das PopUp-Window
|
 Dieses Image dient als üblicher Verweis mit einer Grafik als Klickfläche
<a href="dateiname.htm">
<img src="rot.gif" width="34" height="34" border="0" alt="">
</a>
Mouse-Over
Anders ist das beim Image-Link mit MouseOver-Effekt! Hier gibt zwei Anweisungen:
1) Beim Klicken auf das Image
a) öffne die Datei im Verweis oder das PopUp-Window
2) Wenn der Mauszeiger über den Link fährt
a) tausche das Image gegen ein anderes aus
b) beim Verlassen tausche wieder zurück
|
(Das gilt für ein Image als Link [Beispiel 1] oder für einen Textlink [Beispiel 2], dem man ein 'Wechselimage' zugeordet hat. Ist aber für das Verständnis jetzt noch nicht wichtig)
Aufbau
Hier im Beispiel 1 dient ein Image als verweissensitiver Bereich (Klickbereich). Das gleiche Image soll bei einem MouseOver- MouseOut-Ereignis ausgetauscht werden.
Mit Image-Link
|
Bei MouseOver wird ein Image gegen ein anderes ausgetauscht.
Bei MouseOut wird das erste Image wieder angezeigt.
|
<script language="JavaScript">
<!-- Begin
image1 = new Image;
image1.src = "weiss.gif";
image2 = new Image;
image2.src = "rot.gif";
// End -->
</script>
|
im HEAD-Bereich:
Beiden Images werden eindeutige Namen zugewiesen
|
<a href="dateiname.htm"
onMouseOver="button01.src=image1.src"
onMouseOut="button01.src=image2.src">
|
Im BODY-Bereich:
Im öffnenden HTML-Befehl für den Link werden zusätzlich die Anweisungen für OnMouseOver + OnMouseOut notiert
|
<img src="rot.gif" border="0"
name="button01">
|
HTML-Code für die Grafik als 'Klickbereich'. Hier ist das Attribut zur Vergabe des Namens rot dargestellt.
|
</a>
|
dann das abschließende a-Tag
|
|
Alternatives Beispiel 2
Hier im Beispiel 2 dient ein Text als verweissensitiver Bereich (Klickbereich). Ein innerhalb der gleichen HTML-Seite notiertes Image soll bei einem MouseOver- MouseOut-Ereignis ausgetauscht werden.
Mit Textlink
|
Bei MouseOver wird ein zugeordnetes Image gegen ein anderes ausgetauscht.
Bei MouseOut wird ein zugeordnetes Image wieder zurückgetauscht.
|
|
Erklärungen zur Funktion
Sie kennen vom HTML-Tag für ein Image bereits das Attribut "src". Dort wird ja die Referenz / Datenquelle eingetragen. Wenn sie so wollen die URI oder Adresse.
<img src="images/rot.gif" width="34" height="34" border="0" alt="">
src-Angaben für das Image
"src" ist eine Objekt-Eigenschaft des Images
Der Browser speichert Informationen über Grafikdateien die innerhalb einer Seite angezeigt werden (unter anderem auch die Datenquelle / Referenz) in einer internen 'Tabelle'. Diese Eigenschaft kann man mittels JavaScript lesen und auch ändern.
Ich vergebe nun einen Namen für das Image. Eingetragen wird diese Bildeigenschaft mit
<img src="images/rot.gif" name="button01" width="34" height="34" border="0" alt="">
| |
Das Bildchen hat nun im internen Register des Browsers (in dem alle Seitenelemente stehen) nicht nur mehr eine 'laufende Nummer' sondern einen Namen. Den Namen legte ich selbst fest. Der Name sollte innerhalb der Seite nur einmal vorkommen. Ich verwende Buchstaben, hinten manchmal auch Ziffern, keine Sonder- oder Leerzeichen.
|
src-Informationen Auslesen
|
Mit JavaScript kann man die Referenz-Angaben (src) auslesen. |
Mit JavaScript kann man die Referenz-Angaben (src) auslesen wenn man weiß an welcher Stelle dieser Tabelle die Informationen stehen. Man müsste die Index-Nummer kennen. Einfacher ist es, wenn der Grafik (wie oben beschrieben) ein Name zugeordnet wurde. Dann kann man die Informationen über den Namen der Grafik, eigentlich müsste ich sagen 'über den Namen des Image-Objekts' abfragen.
Auslesen der src-Informationen für die Grafik mit dem Namen 'button01' mit der Anweisung:
document.write(document.images.button01.src)
Die Antwort ist hier (mit allen Pfad-Angaben):
src-Informationen ändern
|
Mit JavaScript kann man die Angaben für src auch ändern (schreiben). Man kann also auch die bisher gültigen Angaben durch neue ersetzen. |
Normalerweise gilt: button01.src = rot.gif
Bei MouseOver gilt: button01.src = weiss.gif
Erklärung
Ein Image-Objekt kann von JavaScript mittels Name eindeutig angesprochen werden. Voraussetzung ist natürlich die vorherige Vergabe eines (eindeutigen) Namens beim Notieren des Images innerhalb der HTML-Seite. Das geschieht hier mit name="button01"
So ist es nun möglich das Image-Objekt button01 gezielt anzusprechen und die Quelle (bisher die Datei "rot.gif") durch eine andere zu ersetzen.
 image1 = Image-Name für weiss.gif (mouseover-Image)
 wurde im Head bekannt gemacht
image2 = Image-Name für rot.gif (mouseout-Image)
wurde im Head bekannt gemacht
button01 = Image-Name für das angezeigte Image in der HTML-Datei
Mit JavaScript erteilt man folgende Anweisungen:
Bei MouseOver ersetze die SRC-Angaben für das Objekt mit dem
Namen "button01" durch die Angaben für "image1"
onmouseover="button01.src=image1.src"
Bei MouseOut ersetze die SRC-Angaben für das Objekt mit dem
Namen "button01" durch die Angaben für "image2"
onmouseout="button01.src=image2.src"
Die Link-Anweisung lautet dann:
<a href="dateiname.htm"
onmouseover="button01.src=image1.src"
onmouseout="button01.src=image2.src">
<img src="rot.gif" name="button01" width="34" height="34" border="0">
</a>
Das bedeutet nicht anderes als:
Die Datenquelle für das Objekt mit dem Namen 'button01' ist:
a) bei MouseOver das, was für 'image1' eingetragen wurde
b) bei MouseOut das, was für 'image2' eingetragen wurde
|
WWW.WEB-TOOLBOX.NET
DOWNLOAD 
HTMLCode
ZURÜCK