mouseOver läuft bei IE nicht bei FIREFOX

  • Nicht schimpfen, nicht aufregen, bitte!
    Ich bin Laie und verzweifle, weil ich am Wochenende vergeblich die Lösung gesucht habe.
    Mit "mouseOver" soll sich beim Rollover der Links jeweils ein anderes, thematisch zugeordnetes Bild öffen, daß sich bei "mouseOut" wieder in das Normalbild zurück ändert.
    Mit dem Text hier funktioniert das bestens im IE. In Firefox habe ich nur ein Standbild.
    Was fehlt? Was ist falsch? Danke, danke!
    floenz

    <DOCTYPE>
    <HTML>....
    <meta> ...

    <script>
    function b1 () {
    document.getElementById("bild").src ="a_a1-couple.jpg";
    }
    function b2 () {
    document.getElementById("bild").src ="a_a2-rhein-madonna.jpg";
    }
    function b3 () {
    document.getElementById("bild").src = "a_a3-reise.jpg";
    }
    function b4 () {
    document.getElementById("bild").src = "a_a4-omaopa.jpg";
    }
    function b5 () {
    document.getElementById("bild").src = "a_a5-justglas.jpg";
    }
    function b6 () {
    document.getElementById("bild").src = "a_a6-decoy.jpg";
    }
    function b7 () {
    document.getElementById("bild").src = "a_a7-biedermeier.jpg";
    }
    function b8 () {
    document.getElementById("bild").src = "a_a8-wappen.jpg";
    }
    function b9 () {
    document.getElementById("bild").src = "a_a9-home.jpg";
    }
    </script>
    </head>


    <body>
    <table>
    <tr>
    <td></td></tr>
    <tr>
    <td></td>
    <td><font><img></font></td>
    <td><font>Die Ortwein - Website</font></td>
    <td><img></td>
    <td></td></tr>
    <tr>
    <td></td></tr>
    </table>

    <table>
    <tr>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b1('1', 'on');" <a href="http://www.ortwein-web.de/AKTUELL/a_intro-aktuell.htm"><font>Aktuell</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b2('2', 'on');" <a href="http://www.ortwein-web.de/KOELN/a_intro-koeln.htm"><font>Ming Stadt</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b3('4', 'on');" <a href="http://www.ortwein-web.de/TRAVEL/a_intro.htm"><font>Reisen</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b4('4', 'on');" <a href="http://www.ortwein-genealogie.de"><font>Genealogie</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b5('5', 'on');" <a href="http://www.Glas-des-Jugendstil.de"><font>SALE: Jugenstil-Glas</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b6('6', 'on');" <a href="http://www.ortwein-koeln.de/DECOYS/a_intro-decoys.htm"><font>SALE: Lockenten/Decoys</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b7('7', 'on');" <a href="http://www.ortwein-koeln.de"><font>Stickereien</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b8('8', 'on');" <a href="http://www.AFV-Wasgovia.de"><font>Rappoltstein</a></td>
    <td></td>
    <td><a onmouseout="b9('9', 'off');" onmouseover="b9('9', 'on');" <a href="a_intro.htm"><font>HOME</a></td>
    <td></td></tr>
    <tr>
    <td></td>
    </tr>
    </table>

    </body>
    </html>

  • Schmeiße aus deinem Beitrag das HTML-Gedöns raus und verrate dafür den Link zur Seite.

  • Da ist aber so ziemlich alles falsch was geht. ^^

    Der a-Tag ist wie Ulli schon sagte falsch geschrieben.

    Im Onload werden auf 2 Funktionen verwiesen die es nicht gibt.

    Und die onmouseover/out-Funktionen liefern jeweils 2 Übergabewerte die aber niemals angenommen werden.

    Das der IE (achtung: der IE8 macht das nicht!) überhaupt was anzeigt, ist irre. Der macht Sachen die ihm nie wer gesagt hat. Ich vermute das mit dem off/on ist eine Sonderfunktion im IE, aber sicher kein Javascript.

  • Guten Abend, .Ulli, Wawushel, bugcatcher!
    And the winner is ... Ulli ! Ich habe den a-Tag <a aus <a href... eliminiert, sodass da jetzt nur noch steht:
    <a onmouseout="b9('9', 'off');" onmouseover="b1('1', 'on');" href="http://www.ortwein-web.de/AKTUELL/a_intro-aktuell.htm"><font size=1 face=arial>Aktuell</a> - usf.
    Und das war's.
    Läuft in IE und Fx einwandfrei.
    Ihr habt mein Wochenende gerettet. Jetzt kann ich beruhigt schlafen gehn.
    Dank an Euch alle.
    floenz

  • Guten Tag bugcatcher! Und auch an Euch, Ulli und Wawuschel!
    Nun habe ich auch die Übergaben ('9', 'off') und das onloed-Attribut in<body> rausgenommen.
    Ergebnis: Eine sehr schlanke Textmenge und völlige Funktionalität sowohl in IE als auch in FIREFOX.

    Allen nochmals vielen Dank!
    floenz

  • Hi,

    würde dir aber noch empfehlen die Grafiken nicht vom Browser skalieren zu lassen,
    sondern sie schon in der richtigen Größe auf dem Server abzulegen.

    Beispiel: diese Grafik http://www.ortwein-web.de/a_a1-couple.jpg hat die Abmessungen (585px × 585px)
    und eine Dateigröße von 313.25 KB - und wird auf eine Größe von 150px × 150px skaliert

    Wenn due die Datei aber schon vorher auf 150px × 150px bringst hat sie wie in diesem Beispiel nur eine
    Dateigröße von ca. 10 KB

    [Blockierte Grafik: http://wawuschel.erweiterungen.org/IMGhost/i/a_a1-couple.jpg]

    oder auch...
    http://www.ortwein-web.de/a_a6-decoy.jpg (633px × 596px) - 87.45 KB

    [Blockierte Grafik: http://wawuschel.erweiterungen.org/IMGhost/i/a_a6-decoy.jpg]
    150x150px - ~11 KB

    Damit dürfte sie auch für Modem- oder ISDN-Nutzer schnelle zu laden sein.


    Gruß
    Wawuschel

  • Hi, Wawuschel!
    Nun auch Dir meinen individuellen Dank. Ich bin wie vorgeschlagen verfahren. Klar, macht ja auch Sinn.
    Im Zusammenhang eine Frage: Bei <a href...><img src ...></a>-Befehlen nutzt aber eine Runter-Skalierung nichts, wenn ich die Bilder vergrößert zeigen will. Oder gibt's da 'nen Trick?
    "Reich ich ihm den kleinen Fingen ..."
    floenz

  • Zitat von floenz

    Hi, Wawuschel!
    Nun auch Dir meinen individuellen Dank. Ich bin wie vorgeschlagen verfahren. Klar, macht ja auch Sinn.
    Im Zusammenhang eine Frage: Bei <a href...><img src ...></a>-Befehlen nutzt aber eine Runter-Skalierung nichts, wenn ich die Bilder vergrößert zeigen will. Oder gibt's da 'nen Trick?
    "Reich ich ihm den kleinen Fingen ..."


    Hinterleg doch bei <a href...> das große Bild und bei <img src...> das kleine. Dann wird auf deiner Seite das kleine angezeigt, beim Klick auf das Bild öffnet sich dann das Große.
    Also z.B.:
    <a href="http://www.ortwein-web.de/a_a1-couple-groß.jpg"><img src="http://www.ortwein-web.de/a_a1-couple-klein.jpg" border="0"></a>

    [Blockierte Grafik: http://firefox.czapura.de/gruss2.png]
    Win XP Home SP3, CPU: Pentium 4, 2,6 GHz, Dual Core, 1 GB RAM
    Mozilla/5.0 (Windows NT 5.1; rv:22.0) Gecko/20100101 Firefox/22.0
    Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20130620 Thunderbird/17.0.7
    Meine Add-Ons