[Miikku]

Hi!
Ich habe folgenden Code: [edit]xDDD sehe grad' dass Ben das im Thread vor mir auch gesagt hat^^[/edit]

<table marginwidth="0" border="0" marginheight="0" leftmargin="0" rightmargin="0"><tr>
 <td background="http://konsolenuspiele.ko.funpic.de/button-weg.gif" onmouseover="this.style.backgroundImage = 'url(http://konsolenuspiele.ko.funpic.de/button-ovr.gif)';" height=40 width=150 onmouseout="this.style.backgroundImage = 'url(http://konsolenuspiele.ko.funpic.de/button-weg.gif)';"></td>
 <td background="http://konsolenuspiele.ko.funpic.de/button-weg.gif" onmouseover="this.style.backgroundImage = 'url(http://konsolenuspiele.ko.funpic.de/button-ovr.gif)';" height=40 width=150 onmouseout="this.style.backgroundImage = 'url(http://konsolenuspiele.ko.funpic.de/button-weg.gif)';"></td>
</tr>
</table>

Der Code sollte bewirken, dass erst das eine gif Bild angezeigt wird und auch seine Animation ausführt und wenn man die Maus drüber hat dann das andere (auch Animation ausführen) und wenn man die Maus wieder runter macht nochmal das erste Bild (auch nochmal Animation ausführen).
Mein Problem:
1. Der IE 7 macht die Animation mit Maus drüber gleich 2x
2. Bei mouseout wird nicht die Animation gezeigt, sondern nur das letzte Bild der Animation
3. Zwischen den Bildern (Tabellenhintergründen) ist Abstand, der nicht weg geht.

Ich würde halt gerne wissen, woran meine 3 Probleme liegen wenn ihr's wisst (ich suche und experimentiere schon ziemlich lange)

Ich freue mich über jegliche Antwort und wünsche schonmal einen guten Rutsch
[edit]PS: Kann es sein dass das "nicht-laden" des Bildes mit meiner schlechten Internetverbindung zusammen hängt?[/edit]
MfG
Miikku

[Bleistift]

Ersetz mal:
background="http://konsolenuspiele.ko.funpic.de/button-weg.gif"
durch:
style="background-image: url(http://konsolenuspiele.ko.funpic.de/button-weg.gif)"

[Miikku]

@Bleistift: Bringt nix
Übrigens: wenn man bei FireFox ganz schnell von einem zum anderen Button geht mit dem Cursor, dann wird die "onmouseout-Grafik" angezeigt (Das verwirrt mich aber nur noch mehr)
MfG
Miikku

[Bleistift]

Hm... Ich würde es sowieso nur mit CSS machen. Verpass den TDs ne Klasse (class="meineTollenTds") und dann den passenden CSS-Code:

.meineTollenTds {
    background-image: url(http://konsolenuspiele.ko.funpic.de/button-weg.gif);
}

.meineTollenTds:hover {
    background-image: url(http://konsolenuspiele.ko.funpic.de/button-ovr.gif);
}

[$traight-$hoota]

das :hover funktioniert aber nicht bei allen Browsern. Da ist es besser, zusätzlich eine Klasse hover zu verwenden (also ".meineTollenTds.hover, meineTollenTds:hover" als Selektor) und diese per JavaScript zuzuweisen.

PHP-Code:

<td class="meineTollenTds" onmouseover="this.class='meineTollenTds hover';" onmouseout="this.class='meineTollenTds';">