Fjodor: rollover

habe dieses script:

<html>
<head>
<script type="text/javascript">
function roll1(nb)

{
var a;
a= new Array();
a[0]=new Image;
a[0].src="img2.gif";
a[1]=new Image;
a[1].src="img1.gif";
eval("img1.src=a["+nb+"].src");
 }
</script>
</head>
<body>
<a href="http://selfhtml.teamone.de" onmouseover="roll1(0)" onmouseout="roll1(1)"> <img name="img1" SRC="img1.gif"  border=0 >Selfhtml</a>
<br>
<a href="http://selfhtml.teamone.de" onmouseover="roll1(0)" onmouseout="roll1(1)"> <img name="img1" SRC="img1.gif"  border=0 >Selfhtml</a>
</body>
</html>

vollgendes problem:
wenn ich nur einen link drinnen hab funktioniert das script! mit 2 zeigt es die bilder nicht mehr an die links neben dem link erscheinen sollten.

hat jemand von euch irgendeine ahnung was ich da falsch gemacht habe?

wäre auch sehr dankbar...

so long fjodor

  1. Hi,

    hat jemand von euch irgendeine ahnung was ich da falsch gemacht habe?

    Ja, einiges ;)
    Überlege Dir mal, was das diese Zeile bedeutet: eval("img1.src=a["+nb+"].src");
    --> (sinngemäß) Zeige für das Objekte "img1" den Inhalt des Array "a" (Stelle "nb") an.

    Du ersetzt also ein Objekt "img1" durch ein Bild, dessen Pfad im Array a gespeichert ist. Dein Problem ist, daß Du unterschiedlichen Objekten die selben Namen gibst: <img name="img1"... kommt bei Dir zweimal vor. Dies darf nicht sein und macht auch keinen Sinn, da Du diese beiden Objekte (Grafiken) nicht mehr unterscheiden kannst.

    Also:
    1. Benenne die einzelnen Grafik-Objekte um, so dass keine Namen mehr doppelt vorkommen --> <img name="img1" SRC="img1.gif"  border=0> und <img name="img2" SRC="img1.gif"  border=0>
    2. Erweitere die Funktion so, daß klar wird, welche Grafik geändert werden soll.
     function roll1(nb, nr)
       {
     var a;
     a= new Array();
     a[0]=new Image;
     a[0].src="img2.gif";
     a[1]=new Image;
     a[1].src="img1.gif";
     eval("img"+nr+".src=a["+nb+"].src");
      }
    3. Ändere den Funktionsaufruf entsprechend ab:
    Für Bild 1:
    <a href="http://selfhtml.teamone.de" onmouseover="roll1(0,1)" onmouseout="roll1(1,1)">
    Für Bild 2:
    <a href="http://selfhtml.teamone.de" onmouseover="roll1(0,2)" onmouseout="roll1(1,2)">

    Viel Erfolg...

    Alex :)

    1. ciao alex

      danke für deine antwort.

      bin jetzt aber nicht sehr viel weiter als vorher.. leider.

      nach deiner erklärung schaut das script jetzt so aus..

      <html>
      <head>
      <script type="text/javascript">
      function roll1(nb, nr)
         {
       var a;
       a= new Array();
       a[0]=new Image;
       a[0].src="img2.gif";
       a[1]=new Image;
       a[1].src="img1.gif";
       eval("img"+nr+".src=a["+nb+"].src");
        }

      </script>
      </head>
      <body>
      <a href="http://selfhtml.teamone.de" onmouseover="roll1(0,1)" onmouseout="roll1(1,1)"><img name="img1" SRC="img1.gif"  border=0>Selfhtml</a>
      <br>
      <br>
      <a href="http://selfhtml.teamone.de" onmouseover="roll1(0,1)" onmouseout="roll1(1,1)"><img name="img2" SRC="img1.gif"  border=0>Selfhtml</a>
      </body>
      </html>

      funktioniert aber trotzdem immer noch nie so wie ich mir das forstelle. wenn ich über den zweiten link fahre wird links vom ersten link das bild angezeigt --> das ist nicht sinn uns zweg.

      hast du noch weiter verbesserungsvorschläge?

      1. Hallo Fjodor,

        danke für deine antwort.

        Bidde, bidde... :o)

        <html>
        <head>
        <script type="text/javascript">
        function roll1(nb, nr)
           {
        var a;
        a= new Array();
        a[0]=new Image;
        a[0].src="img2.gif";
        a[1]=new Image;
        a[1].src="img1.gif";
        eval("img"+nr+".src=a["+nb+"].src");
          }

        </script>
        </head>
        <body>
        <a href="http://selfhtml.teamone.de" onmouseover="roll1(0,1)" onmouseout="roll1(1,1)"><img name="img1" SRC="img1.gif"  border=0>Selfhtml</a>
        <br>
        <br>
        <a href="http://selfhtml.teamone.de" onmouseover="roll1(0,1)" onmouseout="roll1(1,1)"><img name="img2" SRC="img1.gif"  border=0>Selfhtml</a>
        </body>
        </html>

        An sich sieht das ja schon ganz nett und gut aus, ABER:

        Beim _zweiten_ Link muß es _nicht_ onmouseover="roll1(0,1)" und onmouseout="roll1(1,1)", sonern onmouseover="roll1(0,2)" onmouseout="roll1(1,2)" heißen.

        Mit dem zweiten Paramter (also beim ersten Link die 1 und beim zweiten Link die 2) gibst Du an, welche Grafik denn getauscht werden soll. Nach Deiner Ausführung wird immer nur die Erste getauscht, weil Du immer nur die 1 angibst.

        Viele Grüße...

        Alex :)

        1. ciao alex

          bin dir so dankbar!!!

          wirklich sehr nett das du mir weitergeholfen hast.

          so long fjodor