Felix Riesterer: Verschiedene Grafiken in onmouseover

Beitrag lesen

Liebe Znol,

wie spricht man denn Deinen Namen richtig aus? Ich hätte jetzt spontan "snol" mit stimmhaftem "s" gesagt... aber vielleicht ist es ja auch nur dein Nickname und nicht Dein "bürgerlicher" Name.

Zu Deinem Code... Ich gehe zuerst mal auf Dein Javascript ein. Du möchtest Deine Links mit einem Hover-Effekt versehen, wozu Du Javascript mit onmouse-irgendwas benutzt. Gleich hier sei ein Hinweis auf CSS erlaubt, mit dem Du denselben Effekt (meiner Meinung nach) sinnvoller erreichen kannst.

<script type="text/javascript">
Norma11 = new Image();
Normal1.src = "Comicfirst Kopie.gif";/* erste Standard-Grafik */

Gewöhne Dir an, Dateien niemals mit Großbuchstaben und Leerzeichen zu benennen. Es gibt nur Probleme. Verwende wenn nötig den _Unterstrich_.

Highlight1 = new Image();
Highlight1.src = "Comicsecond.gif";/* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "Photosfirst Kopie.gif";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "Photossecond.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "Illustrationsfirst Kopie.gif";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "Illustrationssecond.gif"; /* dritte Highlight-Grafik */
function Bildwechsel (Bildnr, Bildobjekt) {window.document.images[Bildnr].src = Bildobjekt.src;}
</script>

Dieses Script ist aus einem Feature-Artikel entnommen, der mittlerweile etwas Staub angesetzt hat. Daher mein Einwand mit CSS... Aber machen wir einmal weiter.

<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

Was ist das??? Leere Zeilen? Die bitte nicht mit einer Layout-Tabelle generieren! Dazu musst Du unbedingt das Kapitel über CSS-basierte Layouts studieren. Auch wenn es jetzt mit Deinem aktuellen Problem nichts zu tun hat.

<tr><td align="center"><a href="H:\Ulrich\Gallerytoday.htm"
   onmouseover="Bildwechsel(0, Highlight1)"
   onmouseout="Bildwechsel(0, Normal1)"><img src="Comicsecond.gif" border="0" alt="Home"></a></td>

<td align="center"><a href="H:\Ulrich\Gallerytoday.htm"
   onmouseover="Bildwechsel(1, Highlight2)"
   onmouseout="Bildwechsel(1, Normal2)"><img src="Photossecond.gif" border="0" alt="Gallery"></a></td>

<td align="center"><a href="H:\Ulrich\Illustrations.htm"

Wenn Du das später auf den Server hochlädst, dann wird es vielleicht bei Dir ein Bild geben, denn auf Deinem Rechner gibt es ein Laufwerk "H" mit einer Datei "Illustrations.htm" im Verzeichnis "Ulrich". Bei jedem anderen Besucher Deiner Seite wohl eher nicht. Daher wirst Du wahrscheinlich als einzige in den Genuss der Bilder kommen!

onmouseover="Bildwechsel(2, Highlight3)"
   onmouseout="Bildwechsel(2, Normal3)"><img src="Illustrationssecond Kopie.gif" border="0" alt="Illustrations"></a></td>
   </tr>

Mir scheint Du möchtest analog zum oben genannten Feature-Artikel eine Navigation mit hovernden Link-Bildern realisieren. Lies Dir dazu bitte unbedingt noch das Kapitel zu CSS-basierten Navigationsleisten durch! Dort findest Du bestimmt noch etwas, das Dich auf neue Gedanken bringt.

Also hier ist jetzt Dein Problem versteckt:

<td><a href="H:\Ulrich Pforr\Ulrich Pforr.htm"
   onmouseover="Bildwechsel(?, Highlight?)"
   onmouseout="Bildwechsel(?, Normal?)"><img src="Pfeillinksover.gif" border="0" alt="Ulrich"></a></td>

Das Script aus dem Feature-Artikel zeigt nur eine konkrete Verwendung der JavaScript-Eventhandler onmouseover und onmouseout innerhalb von HTML. Für Deine Bedürfnisse muss man das Script ganz entscheidend umändern und anpassen. Warum? Nun, das Script geht von einer ganz bestimmten Nummerierung der Bilder im Dokument aus. Damit ist die übertragene Zahl (erstes Argument in der Klammer) eine Referenz auf das entsprechende <img>-Element im Dokument. Solltest Du vorher ein anderes <img> notiert haben, dann stimmt die Nummerierung nicht mehr und es wird das falsche Bild verändert.

Mein Vorschlag: Löse es mit CSS. Wenn Du nicht willst/kannst/darfst, dann könnte es so funktionieren (ohne einen <script>-Bereich im <head>):

<a href="seite.htm"><img src="bild.gif" alt="Bildbeschreibung" onmouseover="this.src='bild_hover.gif';" onmouseout="this.src='bild.gif';" /></a>

Zur Erklärung: Im Bild-Tag selbst werden die Eventhandler notiert, sodass beim Überfahren des Bildes (und das hat jetzt nix mehr mit dem Link zu tun, in dem es sitzt) die Bildquelle (Bilddatei) geändert wird. Das Schlüsselwort "this" bezieht sich auf das Bildobjekt, über dem sich die Maus gerade befindet. Du musst also in jedes zu hovernde Bild zweimal die originale Bilddatei eintragen (einmal im src-Attribut und einmal im onmouseout-Eventhandler samt seiner Javascript-Anweisung) und einmal das Aufleuchtbild im onmouseover-Eventhandler (ebenfalls mit Javascript-Anweisung).

Liebe Grüße aus Ellwangen,

Felix Riesterer.