hubschraubaer: Problem mit OnMouseOver

Hi!
Ich habe ein Bild verlinkt. Dieses Bild (border_right) soll bei OnMouseOver das nächste Bild (next1) anzeigen. Bei OnMouseOut soll wieder "border_right" angezeigt werden. Und wenn man auf "next1" klickt, soll "next2" angezeigt werden. Bei OnMouseOut soll wieder "border_right" angezeigt werden. Soweit klappt das auch.
Aber beim nächsten OnMouseOver sollte eigentlich wieder das Bild "next2" angezeigt werden. Doch das passiert nicht. Statt dessen wird "next1" angezeigt.

Ich bin kurz davor durchzudrehen, weil ich den Fehler einfach nicht finde :-!

Hier noch der Grund für meine Verzweiflung:

<html>
<head>
 <title>Untitled</title>
<script type="text/javascript">

function next_visible_eins() {
 document.getElementById("border_right").style.display = "none";
 document.getElementById("next1").style.display = "inline";
}
function next_unvisible_eins() {
 document.getElementById("border_right").style.display = "inline";
 document.getElementById("next1").style.display = "none";
}
function next_visible_zwei() {
 document.getElementById("next2").style.display = "inline";
 document.getElementById("border_right").style.display = "none";

}
function next_unvisible_zwei() {
 document.getElementById("next2").style.display = "inline";
 document.getElementById("next1").style.display = "none";
 document.getElementById("border_right").style.display = "inline";
 document.getElementById("next2").style.display = "none";
}

</script>
</head>

<body>
 <img src="border.png" id="border_right" width="96" height="544" alt="border_right" style="display:block; border:none; margin:0; padding:0;" onmouseover="next_visible_eins()">

<a href="#"><img src="next1.png" id="next1" width="96" height="544" alt="next1" style="display:none; border:none; margin:0; padding:0;" onclick="next_visible_zwei()" onmouseover="next_visible_eins()" onmouseout="next_unvisible_eins()"></a>

<a href="#"><img src="next2.png" id="next2" width="96" height="544" alt="next2" style="display:none; border:none; margin:0; padding:0;" onmouseover="next_visible_zwei()" onmouseout="next_unvisible_zwei()"></a>
</body>
</html>

Vielen Dank für eure Antworten!!!
Mit freundlichen Grüßen
ciao, hubschraubaer

  1. Hallo hubschraubaer!

    Ich habe ein Bild verlinkt. Dieses Bild (border_right) soll bei OnMouseOver das nächste Bild (next1) anzeigen.

    Ja funktioniert next1.png wird an der selben Stelle angezeigt

    Bei OnMouseOut soll wieder "border_right" angezeigt werden.

    Ja funktioniert next1.png wird wieder durch border.png ersetzt.

    Und wenn man auf "next1" klickt, soll "next2" angezeigt werden.

    Ja funktioniert next2.png wird bei mir RECHTS DANEBEN angezeigt

    Bei OnMouseOut soll wieder "border_right" angezeigt werden. Soweit klappt das auch.

    Ja und next2.png bleibt rechts sichtbar bis auch dort ein OnMouseOut erfolgt.

    Aber beim nächsten OnMouseOver sollte eigentlich wieder das Bild "next2" angezeigt werden. Doch das passiert nicht. Statt dessen wird "next1" angezeigt.

    Jetzt bin ich verwirrt. Wo soll was angezeigt werden?
    Ich hab es mit dem IE und FF probiert.

    Viele Grüße

    H-P Ortner

    1. Hallo!
      Vielen Dank, dass du mir geantwortet hast!!!

      Jetzt bin ich verwirrt. Wo soll was angezeigt werden?
      Ich hab es mit dem IE und FF probiert.

      Ich versuche es einmal so zu verdeutlichen:

      border_right --> OnMouseOver: next1 wird geladen.
      next1 --> OnMouseOut: border_right wird geladen

      ^^Das soll einen MouseOverEffekt erzeugen (klappt auch). Dann:

      onClick: next1 --> next2 wird geladen und ersetzt ab jetzt next1.

      ^^nach Klick mit der Maus auf next1 soll next2 next1 ersetzen (klappt nicht)

      In Sätzen:
      Mit dem MouseOverEffekt will ich border_right durch next1 ersetzen. Und mit OnMouseOut soll next1 durch border_right ersetzt werden. Bei OnClick auf next1 soll _an Stelle_ von next1 next2 geladen werden.
      An der Stelle, an der vorher next1 war, soll ab jetzt bei jedem MouseOver next2 sein.
      Ich schaffe es nicht, dass nach dem onClick nur noch next2 angezeigt wird.

      Verstehst du es jetzt? Oder ist es zu schlecht von mir formuliert?
      Vielen Dank für dein Bemühen!
      ciao, hubschraubaer

  2. Hi!

    Hallo.

    Ich habe ein Bild verlinkt. Dieses Bild (border_right) soll bei OnMouseOver das nächste Bild (next1) anzeigen. Bei OnMouseOut soll wieder "border_right" angezeigt werden. Und wenn man auf "next1" klickt, soll "next2" angezeigt werden. Bei OnMouseOut soll wieder "border_right" angezeigt werden. Soweit klappt das auch.
    Aber beim nächsten OnMouseOver sollte eigentlich wieder das Bild "next2" angezeigt werden. Doch das passiert nicht. Statt dessen wird "next1" angezeigt.

    Warum sollte "next2" auch angezeigt werden? Du gibst bei border-right den Befehl:

    onmouseover="next_visible_eins()"

    Hast du mal darüber nachgedacht, vielleicht die Adressen der Grafiken zu ändern anstatt einzelne immer ein- und auszublenden?
    Gruß, Volker

    1. Hallo!

      Hast du mal darüber nachgedacht, vielleicht die Adressen der Grafiken zu ändern anstatt einzelne immer ein- und auszublenden?

      Nein! Dies Möglichkeit kannte ich nicht! Vielen Dank! Aber wie kann ich erreichen, dass der Browser diese Bilder in den Cache lädt?! Weil die Bilder sollten nicht erst noch laden müssen. Schließlich soll ein MouseOverEffekt entshtehen.
      ciao, hubschraubaer

      1. Nein! Dies Möglichkeit kannte ich nicht! Vielen Dank! Aber wie kann ich erreichen, dass der Browser diese Bilder in den Cache lädt?! Weil die Bilder sollten nicht erst noch laden müssen. Schließlich soll ein MouseOverEffekt entshtehen.

        Auch diese Sache steht unter dem Link:
        b[0] = new Image(); b[0].src = "holger.gif";
        Dadurch lädt der Browser das Bild in den Cache.

        Gruß, Volker

        1. Hallo Volker!
          Vielen Dank!
          ciao, hubschrabaer