Vorrei realizzare un bottone. Al passaggio del mouse cambio l'immagine di sfondo e il margine in basso (x ottenere il testo ben centrato in badse al contenuto dell'immagine).

IL CODICE CHE SEGUE REALIZZA BENE QUANTO DESIDERATO.
Tuttavia, la formattazione del testo non coincide con il cambio dell'immagine, che viene effettuata appena il mouse entra in tabella, ma viene effettuata dopo, quando si posiziona il mouse sul testo.

COME FARE, senza cambiare le immagini (condendo il testo con l'immagine e cambiando solo questa) A FAR COINCIDERE LE SOSTITUZIONI?

codice:
<TD onmouseover="this.style.backgroundImage='url(blu.gif)';" 
onmouseout="this.style.backgroundImage='url(grigio.gif)';" WIDTH="109" HEIGHT="27" align="center" background="grigio.gif">
<p onmouseover="this.style.marginBottom='6';"
onmouseout="this.style.marginBottom='8';"	
 style="margin-top: 0; margin-bottom: 8"><a href="paginaurl.html">
    Descrizione url</a></TD>