mouseover

[Spakomat]

Guten Tag,
ich habe eine Seite mit zwei Links, die beim Mouseover je ein anderes Bild verändern sollen. Für ein Link funktioniert das, bei dem anderen Link tut sich allerdings nichts. Für eure Hilfe wäre ich sehr dankbar. Den Quellcode hab ich beigefügt.
Viele Grüße
Spakomat

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
// Vorabladen der Bilder
NumberImg       = new Array()

for(var i = 0; i < 2; i++)
{
        NumberImg[i]    = new Image()
        NumberImg[i].src        = "" + i + ".gif"
}

// Bild zeigen
function show_image(idx)
{
        document.showimg.src    = NumberImg[idx].src
}

// Bild zeigen
function hide_image()
{
        document.showimg.src    = NumberImg[0].src
}
// -->

</SCRIPT>
<TABLE BORDER=2 CELLPADDING=8>
<TR ALIGN=CENTER><TD><IMG NAME="showimg" SRC="0.gif" height=38 width=100></TD></TR>
<TR><TD ALIGN=CENTER WIDTH=96><BIG><a HREF="start.htm" onMouseOver="show_image(1)" onMouseOut="hide_image()">Eins</a></BIG></TD>
</TR>
</TABLE>
</center>
<div align="center">
  <center>
<TABLE BORDER=2 CELLPADDING=8>
<TR ALIGN=CENTER><TD><IMG NAME="showimg2" SRC="2.gif" HEIGHT=38 WIDTH=100></TD></TR>
<TR><TD ALIGN=CENTER WIDTH=96><BIG><a HREF="start.htm" onMouseOver="show_image(3)" onMouseOut="hide_image()">Eins</a></BIG></TD>
</TR>
</TABLE>
  </center>
</div>

[Marko]

Hej,

auf den ersten Blick:

for(var i = 0; i < 2; i++)
{
        NumberImg[i]    = new Image()
        NumberImg[i].src        = "" + i + ".gif"
}

Array mit maximalen Index 2!

(...)

<TR><TD ALIGN=CENTER WIDTH=96><BIG><a HREF="start.htm" onMouseOver="show_image(3)" onMouseOut="hide_image()">Eins</a></BIG></TD>

Hier wird doch auf das vierte Element (show_image(3) des Arrays zugegriffen!?!

Viele Grüße,
Marko

[Spakomat]

Und was heißt das jetzt konkret (sorry, kann leider kein javascript)? Soll ich den maximalen Index von zwei auf drei setzen? Dann bleibt allerdings alles beim alten.
Gruß Spakomat

[Marko]

Noch einmal eine kurze Erläuterung:

for(var i = 0; i < 2; i++)
{
        NumberImg[i]    = new Image()
        NumberImg[i].src        = "" + i + ".gif"
}

// Bild zeigen
function show_image(idx)
{
        document.showimg.src    = NumberImg[idx].src
}

// Bild zeigen
function hide_image()
{
        document.showimg.src    = NumberImg[0].src
}
// -->

</SCRIPT>
<TABLE BORDER=2 CELLPADDING=8>
<TR ALIGN=CENTER><TD><IMG NAME="showimg" SRC="0.gif" height=38 width=100></TD></TR>
<TR><TD ALIGN=CENTER WIDTH=96><BIG><a HREF="start.htm" onMouseOver="show_image(1)" onMouseOut="hide_image()">Eins</a></BIG></TD>
</TR>
</TABLE>
</center>
<div align="center">
  <center>
<TABLE BORDER=2 CELLPADDING=8>
<TR ALIGN=CENTER><TD><IMG NAME="showimg2" SRC="2.gif" HEIGHT=38 WIDTH=100></TD></TR>
<TR><TD ALIGN=CENTER WIDTH=96><BIG><a HREF="start.htm" onMouseOver="show_image(3)" onMouseOut="hide_image()">Eins</a></BIG></TD>
</TR>
</TABLE>
  </center>
</div>

1. Du wanderst mit der Mause über die obere Tabelle und es wird das Bild  0.gif durch 1.gif ersetzt. Beim Verlassen wird 1.gif wieder durch 0.gif ersetzt.

2. Du wanderst mit der Mause über die untere Tabelle und es passiert nichts, da Du das Image 3.gif in der FOR_Schleife nicht bekannt gemacht hast (for(var i = 0; i <= 3; i++)). Weiteres wahrscheinliche Problem: Du ersetzt nur das Bild in der OBEREN Tabelle (also 0.gif durch 3.gif und beim Verlassen 3.gif durch 0.gif. Du willst also 2.gif gar nicht ersetzten(?).

Gruß
Marko