MouseOver auf Link -> Bilderwechsel

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

  • MouseOver auf Link -> Bilderwechsel

    Hi Leudz!

    Also ich hab ne eigene Homepage, über Naruto (AniMa) und dort hab ich eine Auflistung aller Charaktere nach Dorf und Alphabet verlinkt zu ihrem Profil. Per OnMouseover Effekt soll jetzt ein Bild an der Seite der Tabelle mit dem Passbild des Charakters ausgetauscht werden. Wie schaffe ich das?!

    Ich hab schon ma was gefunden, aber das klappt iwie net?!

    Der Mouseover:

    <a onmouseover="document.foto.src=image0.src" onmouseout="document.foto.src=image0.src" href="Charaktere/a.php#shibiaburame">Shibi Aburame</a>

    Das in die Zelle, in der das Passbild erscheinen soll:

    <td>
    <script language="JavaScript">
    <!--
    if (document.images) {
    image0 = new Image

    image0.src = "Charaktere/A-H/shibi.jpg"

    }// -->
    </script><br />

    <img src="narutoslife.de/Naruto/Pics/passfoto.png" width="150" height="100" id="foto" name="foto"></td>

    Hoffe ihr könnt mir helfen! Is nämlich wichtig!

    Greetz, Minamato


    Besucht doch Narutoslife - Deine Naruto Informationsquelle!!


    --- Zeitenbann ---


    Besucht doch Zeitenbann.de - Die offzielle Website des Gothic-, Mittelalter- und Skurriles-Shop!!

  • Na und? Dann lässt du halt den Link weg und gibt dem img ein onMouseOver-Attribut, dass die JavaScript Methode ausführt.

    Ungetestet:

    Quellcode

    1. <html><head><title>Test</title>
    2. <script type="text/javascript">
    3. Bild1 = new Image(104, 102);
    4. Bild1.src = "bild1.gif";
    5. Bild2 = new Image(104, 102);
    6. Bild2.src = "bild2.gif";
    7. </script>
    8. </head><body>
    9. <p>
    10. <img src="bild1.gif" onMouseOver="document.images[0].src = Bild2.src;" onMouseOut="document.images[0].src = Bild1.src;"><br>
    11. </p>
    12. </body></html>
    Alles anzeigen

  • All diese Codes wären ja richtig, wenn das Mouseover zum Link und net zum Bild gehören würde...ich kann natürlich das OnMOuseover auf den Link legen, aber es gibt was, was anscheinend net verstanden wird...net böse sein! ;) :P

    [Blockierte Grafik: http://i177.photobucket.com/albums/w219/MartialMino/bild.png]


    Besucht doch Narutoslife - Deine Naruto Informationsquelle!!


    --- Zeitenbann ---


    Besucht doch Zeitenbann.de - Die offzielle Website des Gothic-, Mittelalter- und Skurriles-Shop!!

  • Ich verstehe nicht was dein Problem ist. Mach es doch einfach so:

    Quellcode

    1. <html><head><title>Test</title>
    2. <script type="text/javascript">
    3. KeinAusgewaehlerChar = new Image(104, 102);
    4. KeinAusgewaehlerChar.src = "nochar.gif";
    5. Naruto = new Image(104, 102);
    6. Naruto.src = "naruto.gif";
    7. Sasuke = new Image(104, 102);
    8. Sasuke.src = "naruto.gif";
    9. </script>
    10. </head><body>
    11. <img src="nochar.gif"><br>
    12. <p onMouseOver="document.images[0].src = Naruto.src;" onMouseOut="document.images[0].src = KeinAusgewaehlerChar.src;">Naruto</p>
    13. <p onMouseOver="document.images[0].src = Sasuke.src;" onMouseOut="document.images[0].src = KeinAusgewaehlerChar.src;">Sasuke</p>
    14. </body></html>
    Alles anzeigen


    Bei dynamischer Charakteranzahl muss du's eben noch mit einem Parameter versehen.

  • So...hab den letzten Code ma versucht, aber bei was anderem. Nur is das iwie jetzt gaaaaaaanz komisch! ...>.<

    narutoslife.de/V8/head.htm

    Schaut es euch ma an! Rechts in der Navi soll man auf den Namen des Affiliates fahren, sodass sich der kleine Button mit der Aufschrift "Naruto Affis" sich in den Button der Seite verwandelt. Stattdessen wird aber der Header ausgetauscht?! Was hab ich falsch gemacht?!

    Quellcode

    1. <script type="text/javascript">
    2. NoButton = new Image(104, 102);
    3. NoButton.src = "[url]http://www.narutoslife.de/V8/naruaffs.png[/url]";
    4. Chidori = new Image(104, 102);
    5. Chidori.src = "[url]http://www.narutoslife.ani-network.de/Affis/affliate_chidori.png[/url]";
    6. Narutolimit = new Image(104, 102);
    7. Narutolimit.src = "[url]http://www.narutoslife.ani-network.de/Affis/affliate_narutolimit.png[/url]";
    8. </script>
    10. <td align="center"><img alt="" src="[url]http://www.narutoslife.de/V8/naruaffs.png[/url]" width="88" height="15"></td>
    11. </tr>
    12. <tr>
    13. <td><a onMouseOver="document.images[0].src = Chidori.src;" onMouseOut="document.images[0].src = NoButton.src;" target="_blank" href="[url='http://www.easy-coding.de/'http://www.chidori.de.tl']&raquo;Chidori[/url]http://www.chidori.de.tl">&raquo;Chidori</a><br
    14. >
    Alles anzeigen


    Besucht doch Narutoslife - Deine Naruto Informationsquelle!!


    --- Zeitenbann ---


    Besucht doch Zeitenbann.de - Die offzielle Website des Gothic-, Mittelalter- und Skurriles-Shop!!