Bildwechsel onMouseOver/onMouseOut


  • Ajur
  • 1549 Aufrufe 2 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bildwechsel onMouseOver/onMouseOut

    Nabend allerseits.

    Sitze grade vor einem für mich irgendwie unlösbarem Problem. Es geht darum, das ich eine Homepage bastel, einmal in einer Flash und in einer Html Version. In der Html Version möchte ich, das die "Buttons" genauso aussehn wie in der Flash Version. Dazu habe ich folgende Bilder gemacht:

    1. Bild für onMouseOver
    2. Bild für onMouseout

    Wenn man jetzt über den Button mit der Maus fährt, soll sich das Bild von Bild 1 nach Bild 2 ändern, und wenn man von dem Button runtergeht mti der Maus soll sich das Bild von BIld2 wieder in Bild 1 ändern.

    Hier der Code dafür:

    Quellcode

    1. <script type="text/javascript">
    2. <!--
    3. Normal1 = new Image();
    4. Normal1.src = "pics/button_up.gif";
    5. Highlight1 = new Image();
    6. Highlight1.src = "pics/button_down.gif";
    7. function Bildwechsel(Bildnr,Bildobjekt)
    8. {
    9. window.document.images[Bildnr].src = Bildobjekt.src;
    10. }
    11. //-->
    12. </script>
    Alles anzeigen


    Und der Code für den Button:

    Quellcode

    1. <a href="test.html" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)"><IMG SRC="pics/button_up.gif" BORDER="0"></A>


    Das Problem was ich jetzt habe:
    Auf der Homepage gibt es vor meinen Buttons noch andere Bilder... und irgendwie die beeinflussen irgendwie das Verhalten der Buttons, wieso auch immer. Jedenfalls funktioniert der Button so wie oben beschreiben wenn KEIN Bild vorher drann kommt... Wenn allerdings ein Bild vorher drann kommt, dann wir dieses Bild anstatt der Button ersetzt. Find das sehr komisch... Hat da jemand ne Idee ?

    Ich habe schon gemerkt, dass es wohl an der "0" liegt, da diese wohl auf das Bild VOR dem Button verweist. Jetzt könnte man die Zahlen dementsprechend anpassen, dass man die genau auf die Bilder die vorher kommen abstimmt (Hab ich versucht und ging auch). Wenn jetzt aber ein anderer Inhalt aufgerufen wird verändert sich aber auch die Anzahl der Bilder die vor dem Button kommen. (Also mt Bilde rmeine ich einfach nur *.jpg bzw. *.gif Dateien) Somit ist dann der Button wieder kaputt ...

    Hat jemand nen Tip für mich wie man des hinkriegt das der Button unabhängig von den Bildern die vor ihm geladen sind funktioniert ?

    Greetz Ajur
  • Ok, habe das Problem jetz doch selbst in Griff bekommen. Für diejenigen die es interessiert:

    Ich hab den Bildern vom Button einfach eine id zugewiesen und die Funktion jetzt so geschrieben:

    Quellcode

    1. function Bildwechsel(name,Bildobjekt)
    2. {
    3. document.getElementById(name).src = Bildobjekt.src;
    4. }


    Der Button sieht nun folgerndermaßen aus:

    Quellcode

    1. <a href="index.php?page=de_home" onMouseOver="Bildwechsel('home_up',Highlight5)" onMouseOut="Bildwechsel('home_up',Normal5)"><img id="home_up" src="pics/home_up.gif" border="0" ALT="Home"></A>


    Funktioniert 1a :)
  • Hi,
    jo das ist immer die beste Variante mit den ids zuweisen.

    Wobei du es schon umständlich machst. Du könntest es einfach auf
    <img src="bild1.jpg" onmouseover="this.src=src1" onmouseout="this.src=src2" />
    belassen. Außerdem musst du nicht immer ein "bildobjekt" erstellen. Ein einfacher String

    Quellcode

    1. var src1 = 'bild2.jpg';
    2. var src2 = 'bild1.jpg';

    würde komplett ausreichen ;)

    Aber das nur am Rande zur Info.

    Gruß
    Broken Sword

    P.S.
    Es gibt hier eine "edit-Funktion", die nutzen solltest bevor du zweimal hintereinander postest.
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.