[Phpbb 2] Problem mit Mouse Hover Effekt

Ich habe in einem Code den Mouse Hover Effekt das wenn man über den Namen geht das Standardbild durch das Bild des Teammitgliedes ersetzt wird über dessen Name man geht. Bilder werden auch angezeigt nur ist das Problem das nur die ersten beiden richtig angezeigt werden und die anderen nicht. Die anderen werden trotz anderer Bilder durch die Bilder der ersten beiden ersetzt.

Mir wurde gesagt ich soll mal bei den variablen nachschauen und die verändern. Nur ist das Problem das ich nicht weiß welche ich da verändern muss damit alle Bilder richtig angezeigt werden.

Hier ist der Code den ich benutzte.

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><script type="text/javascript">
<!--

  image0 = new Image;
  image0.src = "http://img528.imageshack.us/img528/7600/teamtitelbild2.png";
 
  image1 = new Image;
  image1.src = "http://img502.imageshack.us/img502/4229/teammelinda2.png";

  image3 = new Image;
  image3.src = "http://img521.imageshack.us/img521/3792/teamphillis2.png";

  image4 = new Image;
  image4.src = "http://img833.imageshack.us/img833/5677/teampiper1.png";

  image5 = new Image;
  image5.src = "http://img140.imageshack.us/img140/2622/teamhailey2.png";

  image6 = new Image;
  image6.src = "http://img69.imageshack.us/img69/8756/teamaiden2.png";


-->
</script>
<script>


var rotationtime = onclick;
var i=1;
var int;
function rotate(){
  (i>1)?document.getElementById(i-1).style.display = 'none':document.getElementById('7').style.display = 'none'
  if(i<=7)document.getElementById(i).style.display = 'block';
  i++;
  if(i>8)i=1;
};

window.onload=function(){
  int = setInterval('rotate()', rotationtime);
};


</script>


<center><table width="700px" cellpadding="0" cellspacing="0" align="center" border="0">
 
  <tbody><tr><td style="background-image:url()"><br>

<table class="index" width="100%"><tbody><tr><td class="index">
 

 </td>


</tr>
<tr><td><img src="">
<center><br><img src="http://img528.imageshack.us/img528/7600/teamtitelbild2.png" name="grafixx" border="0" alt="" align="center"><p>

<a onmouseover="document.grafixx.src=image1.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=2"><font color="#D8D8D8">Melinda</font></a> <font color="#A4A4A4">&amp; </font>
<a onmouseover="document.grafixx.src=image3.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=3"><font color="#D8D8D8">Phillis</font></a> <font color="#A4A4A4">&amp; </font>
<a onmouseover="document.grafixx.src=image1.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=4"><font color="#D8D8D8">Piper</font></a> <font color="#A4A4A4">&amp; </font>
<a onmouseover="document.grafixx.src=image3.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=8"><font color="#D8D8D8">Hailey</font></a> <font color="#A4A4A4">&amp; </font>
<a onmouseover="document.grafixx.src=image3.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=12"><font color="#D8D8D8">Aiden</font></a>
  </p></center>


</td>

</div></td></tr></tbody></table>

Folgende Dinge wurden mir gesagt soll ich ändern.

Code:

var rotationtime = onclick;
var i=1;
var int;
function rotate(){
  (i>1)?document.getElementById(i-1).style.display = 'none':document.getElementById('7').style.display = 'none'
  if(i<=7)document.getElementById(i).style.display = 'block';
  i++;
  if(i>8)i=1;
};

window.onload=function(){
  int = setInterval('rotate()', rotationtime);
};

Wäre dankbar für jede Hilfe oder jeden Tipp wie es geht.

Hallo DarkLuna,

ich hab ihn dir jetzt mal schnell ausgebessert und in meinem Testforum erfolgreich ausprobiert:

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><script type="text/javascript">
    <!--

      image0 = new Image;
      image0.src = "http://img528.imageshack.us/img528/7600/teamtitelbild2.png";
   
      image1 = new Image;
      image1.src = "http://img502.imageshack.us/img502/4229/teammelinda2.png";

      image3 = new Image;
      image3.src = "http://img521.imageshack.us/img521/3792/teamphillis2.png";

      image4 = new Image;
      image4.src = "http://img833.imageshack.us/img833/5677/teampiper1.png";

      image5 = new Image;
      image5.src = "http://img140.imageshack.us/img140/2622/teamhailey2.png";

      image6 = new Image;
      image6.src = "http://img69.imageshack.us/img69/8756/teamaiden2.png";


    -->
    </script>
    <script>


    var rotationtime = onclick;
    var i=1;
    var int;
    function rotate(){
      (i>1)?document.getElementById(i-1).style.display = 'none':document.getElementById('7').style.display = 'none'
      if(i<=7)document.getElementById(i).style.display = 'block';
      i++;
      if(i>8)i=1;
    };

    window.onload=function(){
      int = setInterval('rotate()', rotationtime);
    };


    </script>


    <center><table width="700px" cellpadding="0" cellspacing="0" align="center" border="0">
   
      <tbody><tr><td style="background-image:url()"><br>

    <table class="index" width="100%"><tbody><tr><td class="index">
   

    </td>


    </tr>
    <tr><td><img src="">
    <center><br><img src="http://img528.imageshack.us/img528/7600/teamtitelbild2.png" name="grafixx" border="0" alt="" align="center"><p>

    <a onmouseover="document.grafixx.src=image1.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=2"><font color="#D8D8D8">Melinda</font></a> <font color="#A4A4A4">&amp; </font>
    <a onmouseover="document.grafixx.src=image3.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=3"><font color="#D8D8D8">Phillis</font></a> <font color="#A4A4A4">&amp; </font>
    <a onmouseover="document.grafixx.src=image4.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=4"><font color="#D8D8D8">Piper</font></a> <font color="#A4A4A4">&amp; </font>
    <a onmouseover="document.grafixx.src=image5.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=8"><font color="#D8D8D8">Hailey</font></a> <font color="#A4A4A4">&amp; </font>
    <a onmouseover="document.grafixx.src=image6.src" onmouseout="document.grafixx.src=image0.src" href="http://unwriten-future.forumieren.com/privmsg?mode=post&u=12"><font color="#D8D8D8">Aiden</font></a>
      </p></center>


    </td>

    </div></td></tr></tbody></table>

Funktioniert es auch bei dir, wie gewünscht?

Liebe Grüße
Günther

Was genau hast du den da verändert?
Der sieht mir noch genauso aus wie vorher.

EDIT: Ja jetzt funktioniert er perfekt. Was hast du den verändert?

Setze ihn mal ein und du wirst sehen, dass er jetzt funktioniert.
Mir ist sofort aufgefallen, dass die Scriptzuweisungen in der unteren Tabellenzeile bei den Verlinkungen nicht den Bildern entsprachen und das habe ich angepasst. Probiere ihn einfach mal so aus.

Eingesetzt ist er ja und er funktioniert. Danke

Bitteschön.

Und zu dem, was dir bzgl. des zitierten Teiles gesagt wurde: Dieser Abschnitt (damit meine ich das gesamte Script um diesen Teil herum) hat zwar nicht den Fehler verursacht, aber ist in dieser vorliegenden Form komplett überflüssig und kann bedenkenlos entfernt werden. Du könntest diesen Teil natürlich aufwändig ändern und korrigieren, aber er ist eigentlich nicht benötigt und kann genausogut einfach weggelassen werden.

Denke bitte noch daran, das -Icon zu setzen.
-done-