javascript mouseover

  • Hallo !

    Kann mir jemand sagen, warum der Mouse-Over Effekt in dem angegebenen Link (rechtes Menu AUSWAHL) nicht funktioniert ?

    http://people.freenet.de/abi1990/Entwurf/abi-jahrgang.htm

    Ich hatte mal ein anderes Layout, da funktionierte es einwandfrei. Am CSS-Script liegt es scheinbar nicht.

    Es wäre nett, wenn mir jemand einen Tipp geben kann, wo ich suchen kann. Ich habe nämlich noch ein Gruppenfoto, auf dem die einzelnen Personen nach dem gleichen Prinzip wie im Menü dargestellt werden sollen. Siehe auch http://people.freenet.de/abi1990/1990.htm.

    Vielen Dank für Eure Hilfe.

    Torsten

  • Moin!

    Du machst einen Denkfehler:

    Das rechte Menü ist eine Grafik (eine Map), dein Javascript ist aber nicht in
    der Lage Grafiken zu zerscheiden. Das müßte es aber, um per hover Teile der Hintergrundgrafik zu ersetzen.

    Verwende stattdessen eine normale Navigation wie du es links auf der Seite auch machst.

    G.a.d.M:

    Ronald

  • Hallo Ronald,

    vielen Dank für Deine Antwort. Ich hatte am Anfang auch vor, eine normale Navigation zu verwenden. Da mir die Zeilenhöhe aber zu groß war, und ich nicht weiß, wie ich die Höhe verkleinern kann, wollte ich eine MAP verwenden.

    Ich habe den Fehler mittlerweile gefunden. In dem Script:

    <script type="text/javascript">
    Menu1 = new Image();
    Menu1.src = "./menu/abi-jahrgang/abi-jahrgang.gif"; /* erste Standard-Grafik */
    Menulight1 = new Image();
    Menulight1.src = "./menu/abi-jahrgang/kursfahrten.gif"; /* erste Highlight-Grafik */
    Menulight2 = new Image();
    Menulight2.src = "./menu/abi-jahrgang/abi-fahrt.gif"; /* zweite Highlight-Grafik */
    Menulight3 = new Image();
    Menulight3.src = "./menu/abi-jahrgang/abi-feier.gif"; /* dritte Highlight-Grafik */
    Menulight4 = new Image();
    Menulight4.src = "./menu/abi-jahrgang/abi-foto.gif"; /* dritte Highlight-Grafik */
    Menulight5 = new Image();
    Menulight5.src = "./menu/abi-jahrgang/abi-ball.gif"; /* dritte Highlight-Grafik */
    /* usw. fuer alle weiteren zu benutzenden Grafiken */

    function Bildwechsel (Bildnr, Bildobjekt) {
    window.document.images[16].src = Bildobjekt.src;
    }
    </script>

    habe ich die Nummer des Bildes alt ...[4].scr auf [16].scr geändert. Mir war die Bedeutung der Nummer nicht klar - habe ich auch nur per Zufall gefunden, weil sich bei Mouseover eine andere Grafik verändert hat. Nun funktioniert es also.

    Vielen Dank :)

    Torsten

    PS: prinzipiell gebe ich Dir allerdings recht, dass man nicht so viele unterschiedliche Techniken verwenden sollte, da es vermutlich auch auf Kosten der Perfomance geht, oder ? :danke:

  • Ah ja, du hast also für jedes Hover die komplette Grafik neu gemacht und veränderst dann nur eine einzelne Reihe.

    Hast du schon mal drüber nachgedacht, daß du das mit Stylesheets viel schöner hinbekommen kannst, ganz ohne Grafik?

  • Gibt es zu CSS brauchbare Tutorials, damit man das auch mal lernt. Sonst bleiben es wegig Bömische Dörfer :)

    Danke für Deine Tipps.

    Torsten.