input-Feld mit Bild darstellen und mouseover-Effekt belegen

[BxBender]

<td style=""><input type="image" src="{$style['imagefolder']}/thumbs_down.gif" onmouseover="this.src='{$style['imagefolder']}/thumbs_up.gif' ; " onmouseout="this.scr='{$style['imagefolder']}/thumbs_down.gif' ; " name="rating" value="1" onclick="this.form.submit();" /></td>

So sieht mein Codeschnipsel aus.
Mehrere davon ergeben eine Bewertungsreihe, dargestellt durch Sterne.
Wenn man mit der Maus darübergeht, dann ändert sich die Sternfarbe (neues Bild, aber wenn man den Bereich verläßt, dann soll sich das Bild wieder in das Ursprungsbild zurückändern.
Was in meinem Fall leider natürlich nicht geschieht.
Einmal den Bereich berührt, bleibt das ausgetauschte Bild immer da.
Deshalb frage ich euch Profis, ob ihr mir da den Code anpassen könnt, damit das funktionieren kann.
Meine CSS-Kenntnisse sind mit Hilfe von dieser Webseite zumindest auf Anfängerniveau angestiegen, Javasript kann ich nicht.
Optimal wäre natürlich, wenn man irgendwie hinbekommen könnte, dass man meinetwegen mit dem Mauszeiger an 4ter von 5ter Stelle hinschwenkt, und sich dadurch alle Sterne bis dahin alle umwandeln, so dass man quasi eine Voransicht der abzugebenden Bewertung bekommt, bevor man seinen Klick durchführt.
Ich versuche so etwas hinzufummeln, wie das z.B. im neuen wbb3 Forum zu sehen ist.
Wenn ihr möchtet, poste ich hier den ganzen Bewertungscode, falls nötig.
Danke für eure Hilfe.

Gruß

Alex