Thomas K.: animierte Buttons mit JS

Vielleicht kann mir jemandsagen, warum das nicht funktioniert (soll die abwechselnd erscheinennden Grafiken bei mouseOver/mouseOut erzeugen):

im header:
<script language="JavaScript">
firstpic = new Image(); firstpic.src = "home1.gif";
secondpic = new Image(); secondpic.src = "home2.gif";
thirdpic = new Image(); thirdpic.src = "leistungen1.gif";
fourthpic = new Image(); fourthpic.src = "leistungen2.gif";
function bildwechsel1() { document.bildwechsel1.src = firstpic.src }
function bildwechsel2() { document.bildwechsel1.src = secondpic.src }
function bildwechsel3() { document.bildwechsel2.src = thirdpic.src }
function bildwechsel4() { document.bildwechsel2.src = fourthpic.src }
</script>

und im body:
<a href="index.htm" onMouseOver="bildwechsel2()" on MouseOut="bildwechsel1()">
  <img src="home1.gif" name="bildwechsel1" border=0 width=115 height=36>
<a href="index.htm" onMouseOver="bildwechsel4()" on MouseOut="bildwechsel3()">
  <img src="leistungen1.gif" name="bildwechsel2" border=0 width=115 height=36>

  1. Hallo,

    ich kenne mich in JS zwar auch nicht so gut aus, denke aber, dass du hier einen kleinen Typo eingebaut hast.

    Du schreibst "on MouseOut" - das muss aber "onMouseOut" heißen!

    Versuche doch mal, die onMouseOver- und onMouseOut-Tags in den <IMG ...>-Befehl einzufügen, statt ihn beim <A ...>-Link drinzuhaben.

    Ich hoffe, dir geholfen zu haben.

    Viele Grüße,
       Florian Auer

    1. Hi Florian,

      "on MouseOut" - das muss aber "onMouseOut" heißen!

      den hab ich jetzt rausgenommen, klappt aber immer noch nicht.

      Versuche doch mal, die onMouseOver- und onMouseOut-Tags in den <IMG ...>-Befehl einzufügen, statt ihn beim <A ...>-Link drinzuhaben.

      Hmm, hab ich erstmal so nicht hinbekommen (sprich ging auch nicht), aber da gibts ja noch ein paar Versionen zum Ausprobieren... also ich bin aber ziemlich fest der Meinung,dass es so schon mal ging <grübel>

      Ich hoffe, dir geholfen zu haben.

      zumindest ein paar Denkanstöße, danke erstmal :o))

      Thomas

      1. <html>

        <head>
        <title>Neue Seite 3</title>
        <script language="JavaScript">
          <!--

        /* Dieses Script ist für 10 buttons konfiguriert.
        Die grafiknamen und die Linkverweise müssen zum Eindinden geändert werden.*/

        Normal1 = new Image();
          Normal1.src = "buttons/buttona1.jpg";
          Highlight1 = new Image();
          Highlight1.src = "buttons/buttonb1.jpg";

        Normal2 = new Image();
          Normal2.src = "buttons/buttona2.jpg";
          Highlight2 = new Image();
          Highlight2.src = "buttons/buttonb2.jpg";
        probiers mal mit

        /* usw. fuer alle weiteren zu benutzenden Grafiken */

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

        <a href="index.htm" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
        <img border="0" src="buttons/buttona1.jpg" width="200" height="50"></a></td>

        wenns immer noch nicht klappt schreib mir ich schicke dir ein script das funktioniert.

        viel erfolg Kevin

  2. Hallo Thomas

    <a href="index.htm" onMouseOver="bildwechsel2()" on MouseOut="bildwechsel1()">
      <img src="home1.gif" name="bildwechsel1" border=0 width=115 height=36>
    <a href="index.htm" onMouseOver="bildwechsel4()" on MouseOut="bildwechsel3()">
      <img src="leistungen1.gif" name="bildwechsel2" border=0 width=115 height=36>

    ich würde die a-Tags erst einmal schließen.

    Viele Grüße

    Antje