Markus: Was ist falsch an diesem MouseoverEffekt?

Hi!
Ich versuche einen einfachen Mouseover-Effekt mit JavaScript zu machen. Aber das klappt nicht. Woran liegt es? Ich finde den Fehler nicht! Könnt ihr mir vielleicht helfen?
Hier der Quelltext:

<html>
<head>
 <title>Untitled</title>
<script type="text/javascript">
function show_top_img(box){
 document.getElementById(box).src = "bilder/" + box + "_hover.png";
}
function hide_top_img(box){
 document.getElementById(box).src = "bilder/" + box + ".png";
}
</script>
</head>

<body>
<div style="width:699px; margin:0 auto 0 auto;">
 <div style="margin-right:0; padding:0; background-color:#FFFFFF;">
  <img src="bilder/gal.png" id="gal" width="150" height="96" onmouseover="show_top_img('gal')" onmouseout="hide_top_image('gal')" alt="">
  <img src="bilder/scripts.png" id="scripts" width="150" height="96" onmouseover="show_top_img('scripts')" onmouseout="hide_top_image('srcipts')" alt="">
  <img src="bilder/art.png" id="art" width="150" height="96" onmouseover="show_top_img('art')" onmouseout="hide_top_image('art')" alt="">
 </div>
</div>
</body>
</html>

Vielen Dank für euer Bemühen und für eure Hilfe!
Gruß, Markus

  1. Ich versuche einen einfachen Mouseover-Effekt mit JavaScript zu machen. Aber das klappt nicht. Woran liegt es? Ich finde den Fehler nicht! Könnt ihr mir vielleicht helfen?

    Wie lautet die Felermeldung?

    Hier der Quelltext:

    Wobei deine Lösung extrem umständlich ist.

    <img src="bilder/gal.png" id="gal" width="150" height="96" onmouseover="show_top_img('gal')" onmouseout="hide_top_image('gal')" alt="">

    Du willst also bei einem mousover das Bild selber auswechseln, dazu reicht this, das ist die Referenz auf das aktuelle Objekt in dem Falle das Bild:

    <img src="bilder/gal.png" id="gal"
    onmouseover="this.src = 'bilder/'+ this.id + '_hover.png';"
    alt="">

    ich hab mal ein Skript geschriben, das genau das macht, ohne das du JS Code in den HTML Code einfügen musst, lediglich eine Klasse ist nötig: http://javascript.jstruebig.de/skripte/30/
    Das macht dann alles automatisch.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Hallo!

      Wie lautet die Felermeldung?

      hide_top_img is not defined! Es geht jetzt zwar (mit this! Danke!), aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?

      Vielen Dank für deine Hilfe!
      Gruß, Markus

      1. Wie lautet die Felermeldung?
        hide_top_img is not defined! Es geht jetzt zwar (mit this! Danke!), aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?

        Nein. das ist der Name deiner Funktion, die bei einem mousout ausgeführt wird. Wenn du sie so wie in dem Quellcode definiert hast, wie du es uns gezeigt hast, sollte das funktionieren.

        Was sagt die JS Konsole von firefox?

        Struppi.

        --
        Javascript ist toll (Perl auch!)
      2. Hallo Markus,

        hide_top_img is not defined! [...] aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?

        natürlich. Schau dir deinen Code genau an:

        function hide_top_img(box){
        document.getElementById(box).src = "bilder/" + box + ".png";
        }

        <img src="bilder/art.png" id="art" width="150" height="96" onmouseover="show_top_img('art')" onmouseout="hide_top_image('art')" alt="">

        Und nun vergleiche bitte den Namen der Funktion, so wie sie definiert ist, mit dem Namen der Funktion, die du aufrufen möchtest. ;-)

        Ciao,
         Martin

        --
        Computer funktionieren grundsätzlich nicht richtig.
        Wenn doch, hast du etwas falsch gemacht.
        1. hide_top_img is not defined! [...] aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?

          natürlich. Schau dir deinen Code genau an:

          Natürlich ist das nicht, den eigentlich müßte ja die Fehlermeldung den falschen Namen im Funktionsaufruf kritisieren und nicht im script Block.

          Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.

          Struppi.

          --
          Javascript ist toll (Perl auch!)
          1. Hallo Struppi,

            Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.

            ... oder nicht den genauen Wortlaut der Fehlermeldung. ;-)

            So long,
             Martin

            --
            Ich bin 30. Ich demensiere apokalyptisch.
              (Orlando)
            1. Hallo!

              Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.

              Doch! Ich habe euch den kompletten Code gezeigt. Mehr hatte ich zu dem Zeitpunkt noch nicht. Und auch den genauen Wortlaut. Aber die Konsole ist komisch, da sie Zeile1 als Fehlerzeile angibt. Was ja definitiv nicht der Fall ist.

              Aber jetzt habe ich ein neues Problem. Ich würde gerne bei dem MouseoverEffekt nicht nur den jeweiligen Button verändern, sondern auch noch ein bestimmtes Bild. Das src-Attribut des Bildes soll bei jedem Mouseover und Mouseout verändert werden.
              Hier der Quelltext:

              <html>
              <head>
               <title>Untitled</title>
              <script type="text/javascript">
              function show_top_img(box){
               document.getElementById("head").src = "bilder/" + box + "_top_img.jpg";
               document.getElementById(box).src = "bilder/" + box + "_hover.png";
              }
              function hide_top_img(box){
               document.getElementById("head").src = "bilder/top_img1.png";
               document.getElementById(box).src = "bilder/" + box + ".png";
              }
              </script>
              </head>

              <body>
              <div style="width:699px; margin:0 auto 0 auto;">
               <div style="float:left; margin:0; padding-top:1px;">
                <img src="bilder/top_img1.jpg" id="head" width="549" height="288" alt="Tarot - Der Weg des Lebens" title="Tarot - Der Weg des Lebens">
               </div>
               <div style="margin-right:0; padding:0; background-color:#FFFFFF;">
                <img src="bilder/gal.png" id="gal" width="150" height="96" onmouseover="show_top_img('gal')" onmouseout="hide_top_img('gal')" alt="" style="margin-right:0; padding-right:0; text-align:right;">
                <img src="bilder/scripts.png" id="scripts" width="150" height="96" onmouseover="show_top_img('scripts')" onmouseout="hide_top_img('scripts')" alt="" style="margin-right:0; padding-right:0; padding-top:1px; text-align:right;">
                <img src="bilder/art.png" id="art" width="150" height="96" onmouseover="show_top_img('art')" onmouseout="hide_top_img('art')" alt="" style="margin-right:0; padding-right:0; padding-top:1px; text-align:right;">
               </div>
              </div>
              </body>
              </html>

              Vielen vielen Dank für eure Hilfe!
              Liebe Grüße, Markus

              1. Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.
                Doch! Ich habe euch den kompletten Code gezeigt. Mehr hatte ich zu dem Zeitpunkt noch nicht. Und auch den genauen Wortlaut. Aber die Konsole ist komisch, da sie Zeile1 als Fehlerzeile angibt. Was ja definitiv nicht der Fall ist.

                Für den IE schon, da der falsche code im Eventhandler ausgeführt wird, der Wortlaut der Fehlermledung war dann also ein anderer.

                Schau in die JS Konsole vom Firefox und du wirst deine auch alleine Fehler finden!

                Aber jetzt habe ich ein neues Problem. Ich würde gerne bei dem MouseoverEffekt nicht nur den jeweiligen Button verändern, sondern auch noch ein bestimmtes Bild. Das src-Attribut des Bildes soll bei jedem Mouseover und Mouseout verändert werden.

                [code] ....

                Vielen vielen Dank für eure Hilfe!

                wie lautet die Fehlerbeschreibung?

                Struppi.

                --
                Javascript ist toll (Perl auch!)