effetto hover in un form senza immagini

[Avvinazzato]

ciao a tutti,

Ho letto parecchio nel forum, ma per quello che voglio fare io, mi sembra di non aver trovato nulla.
In pratica:
in un form vorrei sostituire i tasti di invio con dei background, scriverci sopra il testo, che si colori al passaggio del mouse.Forse è più difficile da spiegare che da capire.
In pratica ho tutti i link del sito che al passaggio del mouse si colorano di rosso, e vorrei fare questo anche per i form.
Un po di codice:
nella pagina:

<td colspan="2" align="left" class="tastiSubmit"><DIV id=notizie>[b]login[/b]
<input type="image" src="http://localhost/NEW/public_html/img/ghost.gif" name="login"  onclick="this.parent.submit();">
<input type="hidden" name="action" value="invia"></DIV> 

nel foglio di stile

#notizie 
{
FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #FFFFFF; 
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
FONT-STYLE: italic;  TEXT-DECORATION: none}

#notizie:hover,
.over
{
  COLOR: red; TEXT-DECORATION: none
}

Javascript
var notizie = document.getElementById('notizie');
notizie.onmouseover = function()
{
   this.className = 'over';
}
notizie.onmouseout = function()
{
   this.className = '';
} 

In pratica funziona benissimo, quando passo sulla scritta "login" si colora di rosso, solo che sul background vi visualizza prima la scritta e poi l'immagine ghost.gif (che praticamente non è niente)e quindi funzia solo se mi sposto qualche pixel più a destra (dove appunto c'è ghost.gif)
Non so se avete capito, è un po incasinato.
Comunque grazie in anticipo.

[Kiantis]

Forse meglio evitare entrambi javascript e css insieme, preferirei solo css visto che supporta questa funzionalità ed è un linguaggio dichiarativo.