Ankündigung

Einklappen
Keine Ankündigung bisher.

Animierte Buttons mit JavaScript

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Animierte Buttons mit JavaScript

    Hallo,

    ich will in meinem Menü animierte Buttons mit Hilfe von JavaScript einbauen, nur funktioniert das leider nocht so ganz. Wenn man mit dem Mauszeiger z.B. auf den Button "Home" fährt, verändert er sich und wenn man mit dem Mauszeiger wegfährt, sollte wieder der vorherige Button angezeigt werden, nur das funktioniert nicht.

    Hier mein Script:

    <html>
    <head>
    <title>Right Said Fred</title>
    <script language="JavaScript">
    var x=0;
    var button_1,button_2;
    var buttons = new Array("home.gif","home1.gif","news.gif","news1.gif","tv.gif","tv1.gif","tour.gif",
    "tour1.gif","charts.gif","charts1.gif","bio.gif","bio1.gif","disco.gif","disco1.gif","songtexte.gif" ,"songtexte1.gif","audio.gif",
    "audio1.gif","fotos.gif","fotos1.gif","shop.gif","shop1.gif","umfragen.gif","umfragen1.gif","forum.g if","forum1.gif","chat.gif",
    "chat1.gif","buch.gif","buch1.gif");

    function wechsel(button_1,button_2)
    {
    var button=new Image();
    button.src=buttons[button_2];
    window.document.images[button_1].src=button.src;
    }

    </script>
    </head>
    <body bgcolor="#0000A0">
    <br>
    <br>
    <br>
    <br>
    <a href="home.html" target="rechts" onMouseOver="wechsel(0,1)" onMouseOver="wechsel(1,0)"><img src="home.gif" border="0></a>
    </body>
    </html>

    Ich habe hier jetzt mal nur den ersten Button des Menüs verwendet, sodass nichts durcheinander gerät, aber welchen Wert muss ich onMouseOver vergeben?
    Die Wahrheit wird sich von selbst offenbaren.

  • #2
    Re: Animierte Buttons mit JavaScript

    Ich hoff mal ich hab das Script richtig gelesen:
    .....
    <html>
    <head>
    <title>Right Said Fred</title>
    <script language="JavaScript">
    var x=0;
    var button_1,button_2;
    var buttons = new Array("home.gif","home1.gif","news.gif","news1.gif","tv.gif","tv1.gif","tour.gif",
    "tour1.gif","charts.gif","charts1.gif","bio.gif","bio1.gif","disco.gif","disco1.gif","songtexte.gif" ,"songtexte1.gif","audio.gif",
    "audio1.gif","fotos.gif","fotos1.gif","shop.gif","shop1.gif","umfragen.gif","umfragen1.gif","forum.g if","forum1.gif","chat.gif",
    "chat1.gif","buch.gif","buch1.gif");

    function wechsel(button_1,button_2)
    {
    var button=new Image();
    button.src=buttons[button_2];
    window.document.images[button_1].src=button.src;
    }

    </script>
    </head>
    <body bgcolor="#0000A0">
    <br>
    <br>
    <br>
    <br>
    <a href="home.html" target="rechts" onMouseOver="wechsel(0,1)" onMouseOut="wechsel(0,0)"><img src="home.gif" border="0"></a><br>
    <a href="home.html" target="rechts" onMouseOver="wechsel(1,3)" onMouseOut="wechsel(1,2)"><img src="home.gif" border="0"></a>....

    </body>
    </html>
    der Eine

    Kommentar


    • #3
      So geht es auch:

      PHP-Code:
      <html>

      <
      head>
      <
      meta name="GENERATOR" content="Proton 3.1">
      <
      meta name="ProgId" content="FrontPage.Editor.Document">
      <
      meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <
      script language="JavaScript" type="text/JavaScript">
      <!--
      function 
      MM_swapImgRestore() { //v3.0
        
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
      }

      function 
      MM_preloadImages() { //v3.0
        
      var d=document; if(d.images){ if(!d.MM_pd.MM_p=new Array();
          var 
      i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0i<a.lengthi++)
          if (
      a[i].indexOf("#")!=0){ d.MM_p[j]=new Imaged.MM_p[j++].src=a[i];}}
      }

      function 
      MM_findObj(nd) { //v4.01
        
      var p,i,x;  if(!dd=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
          
      d=parent.frames[n.substring(p+1)].documentn=n.substring(0,p);}
        if(!(
      x=d[n])&&d.allx=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(
      i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
        if(!
      && d.getElementByIdx=d.getElementById(n); return x;
      }

      function 
      MM_swapImage() { //v3.0
        
      var i,j=0,x,a=MM_swapImage.argumentsdocument.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
         if ((
      x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrcx.oSrc=x.srcx.src=a[i+2];}
      }
      //-->
      </script>
      </head>

      <body bgcolor="#76AAD9" topmargin="0" onLoad="MM_preloadImages('button1.gif')">

          <a onMouseOver="MM_swapImage('button1','','button1.gif',1)" onMouseOut="MM_swapImgRestore()" href="index.html">
          <img border="0" src="button1.gif" alt="button1" name="button1"</a></p>

      </body></html> 
      "...To boldly go where no man has gone before."
      ...BASED UPON "STARTREK" CREATED BY GENE RODDENBERRY...

      Kommentar


      • #4
        Sorry, ich habe hier versehentlich MouseOver statt MouseOut geschrieben, aber mit den neuen Werten gehts. Danke euch.

        P.S.: Ich habe hier noch ein Problem mit dem zweiten Button:
        Wenn ich den Button mit dem Mauszeiger berühre verändert sich der nächste Button tv.gif zu news1.gif statt news.gif zu news1.gif

        <a href="news.html" target="rechts" onMouseOver="wechsel(2,3)" onMouseOut="wechsel(2,2)"><img src="news.gif" border="0"></a>

        Was ist denn schon wieder falsch, wenn doch eh news.gif Platz 2 im Array belegt und news1.gif Platz 3???

        P.S.S.: Ganz hab ich's nicht verstanden, aber ich hab's geschafft, indem ich das so abgeandert habe:
        <a href="news.html" target="rechts" onMouseOver="wechsel(1,3)" onMouseOut="wechsel(1,2)"><img src="news.gif" border="0"></a>

        Gibt der erste Wert immer den Index des Bildes und der Zweite den Index des Array-Elements an?

        P.S.S.S: Okay, ich habs verstanden...
        Zuletzt geändert von Picard; 01.09.2002, 12:52.
        Die Wahrheit wird sich von selbst offenbaren.

        Kommentar

        Lädt...
        X