Verschiedene Grafiken in onmouseover
0 
Felix Riesterer
Verschiedene Grafiken in onmouseover
Hallo,
ich habe ein html.Datei mit 9 Grafiken.
Eine davon, ist eine nicht veränderte Grafik.
Ich habe alle acht in ein Javascript eingebunden, nur leider verändert sich auch das neunte.
Nur das soll es ja gerade nicht.
Sechs sind drei gleiche Grafiken, die auch gut funktionieren.
Zwei Grafiken, die noch ein anderes onmouseover darstellen sollen, vermischen sich dann aber immer mit den anderen, sowie mit der daneben stehenden Grafik, die sich nicht verändern soll.
Ich denke es liegt an einer falschen Definition.
Ich habe es so verstanden, dass ich alle Grafiken in das script einfügen muss, die sich verändern sollen; aber auch, wenn es zwei verschiedene onmouseover sind?
Hoffe, Ich habe mich noch deutlich ausdrücken können.
Gruß, Znol
-
Liebe(r) Znol,
Hoffe, Ich habe mich noch deutlich ausdrücken können.
nö, denn ohne Beispiel zum Ansehen kann man das nicht wirklich verstehen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
Ich bin eine Sie :), hier die Ausschnitte:
<script type="text/javascript">
Norma11 = new Image();
Normal1.src = "Comicfirst Kopie.gif";/* erste Standard-Grafik */
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>
....<table align="right" border="0">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr><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"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img src="Illustrationssecond Kopie.gif" border="0" alt="Illustrations"></a></td>
</tr>
</table><table height="550">
<tr valign="bottom">
<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>
<td><img src="Homes.gif" alt="Home"></td>
</tr>
</table>So habe ich es erstmal gerade gelassen - oben fehlt jetzt die Definition für die unterste Tabelle. Die Grafiken comicfirst, illustrationsfirst, photosfirst sind alle in etwa gleich, darum auch in einer Tabelle horizontal nebeneinander angeordnet und eigentlich gut.
Pfeillinksover ist jedoch ein ganz anderes onmouseover, dieses kann ich dich aber nicht einfach als Normal4, Highlight4 mit einbinden?
Ich habe dann ja nichts zum auswechseln oder?Dieses Beispiel hatte ich ja aus selfhtml, Normal und Highlight könnte ich ja auch anders nennen, so wie ich es verstanden habe?
In der Zelle neben diesem einzelnen onmouseover ist die Grafik Homes eingebunden, die sich nicht verändern soll.
Wie schaffe ich es, dass die zwei onmouseover getrennt funktionieren, ohne andere Grafiken mit zu verändern?
So wie ich es bisher versucht habe, wird beim überfahren des onmouseovers Pfeillinksout das comicfirst plötzlich verändert (obwohl die damit gar nichts zu tun haben soll), und die Grafik homes verschwindet, dafür sehe ich dann da Pfeillinksout.
Hoffe, so ist es deutlicher?
Gruß, Znol
-
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> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </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.
-
Hallo Felix,
konnte erst jetzt wieder mich weiter dem hier widmen, so, werde erstmal nochmal nachlesen.
Ja, die Leerzeilen waren erstmal Versuch überhaupt die Links so positioniert zu bekommen - ähem...
Ich habe bei CSS immer ein etwas mulmiges Gefühl, obwohl hier soviele damit arbeiten, weil ich denke, dass es doch vlt. viele Nutzer ausschliesst?
Oder ist das einfach nurr Irrglaube von mir, der sich da manifestiert hat?
Ich werde erstmal schauen, wie ich danach zurecht komme, und mich nochmal rückmelden, wenn Du vlt. noch antworten magst.
Ja, Znol mit scharfen "S" am Anfang, mir gefielen die Buchstaben, auch wenn sich das Wort schon etwas merkwürdig anhören mag :D
So, nun werde ich ausprobieren und lesen, Gruß Znol
-
Liebe Znol,
Ich habe bei CSS immer ein etwas mulmiges Gefühl, obwohl hier soviele damit arbeiten, weil ich denke, dass es doch vlt. viele Nutzer ausschliesst?
Nein! Sogar im Gegenteil!
Mittels CSS entfernst Du alles aus dem HTML Quelltext, was nicht hineingehört (weil Optisches nichts mit HTML zu tun hat -> semantisches Markup) und lagerst die visuelle Gestaltung eben in CSS aus. Dadurch können dann ALLE Endgeräte, die HTML verarbeiten können, Deine Inhalte erreichen. Desktop Browser können sie sogar mehr oder weniger so darstellen, wie Du es per CSS anweist. Inwieweit Handy-Browser CSS umsetzen können weiß ich nicht, aber mit rein semantischem HTML können sie auf jeden Fall die Inhalte verarbeiten.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
-