Tom: Rollover mittels Arrays

Ich habe ein Javascript-Game geschrieben, das unter http://www.thomasweibel.ch/mahjongg.htm zu finden ist und das ich jetzt durch einen Rollover-Effekt (onMouseOver) ergänzen möchte. Unnötig zu erwähnen, dass dazu der Preload einer ganzen Menge Bilder nötig ist, was allerdings gut klappt. Ich versuche nun, mithilfe einen onMouseOver-Bildwechsel hinzukriegen, was meiner Meinung nach nur mithilfe von Arrays sinnvoll ist. Und das klappt nun überhaupt nicht. Der Code:

function rollover(j,gif)
{
window.document.images[j].src=gif.src;
}

face=new Array('bild1','bild2','bild3');
n=face.length;
picoff=new Array(n);
picon=new Array(n);
roll=new Array(n);
link=new Array(n);

for (i=0;i<n;i++)
{
picoff[i]=new Image();
picoff[i].src=face[i]+".gif";
picon[i]=new Image();
picon[i].src=face[i]+"a.gif";
roll[i]=" onMouseOver='rollover("+i+","+picon[i]+")' onMouseOut='rollover("+i+","+picoff[i]+")'";
link[i]="<a href='' border=0"+roll[i]+"></a>";
}

Was ist hier bloss falsch??!

  1. Hallo Tom,

    for (i=0;i<n;i++)
    {
    picoff[i]=new Image();
    picoff[i].src=face[i]+".gif";
    picon[i]=new Image();
    picon[i].src=face[i]+"a.gif";
    roll[i]=" onMouseOver='rollover("+i+","+picon[i]+")' onMouseOut='rollover("+i+","+picoff[i]+")'";
    link[i]="<a href='' border=0"+roll[i]+"></a>";
    }

    du weißt, dass man Rolloverimages so einbindet:

    <a href="#" onclick="return false;" onmouseover="deineFunktion()" onmouseout="deineFunktion()"><img src="deineBildquelle" border="0" name="derBildname" width="dieGröße" height="dieGröße"></a> ?

    Viele Grüße

    Antje

    1. Hallo Tom,

      for (i=0;i<n;i++)
      {
      picoff[i]=new Image();
      picoff[i].src=face[i]+".gif";
      picon[i]=new Image();
      picon[i].src=face[i]+"a.gif";
      roll[i]=" onMouseOver='rollover("+i+","+picon[i]+")' onMouseOut='rollover("+i+","+picoff[i]+")'";
      link[i]="<a href='' border=0"+roll[i]+"></a>";
      }

      du weißt, dass man Rolloverimages so einbindet:

      <a href="#" onclick="return false;" onmouseover="deineFunktion()" onmouseout="deineFunktion()"><img src="deineBildquelle" border="0" name="derBildname" width="dieGröße" height="dieGröße"></a> ?

      Jep, das weiss ich - ich hab hier den Code nur etwas abgespeckt, damit er übersichtlicher wird. Das vollständige Opus siehst Du unter obiger URL; da werden eine Menge Bild-hrefs dynamisch erstellt. Ich vermute, dass ich im Code irgend 'nen Denkfehler mache, auf den ich einfach nicht komme... :-(

      Tom

      Viele Grüße

      Antje