[html]Button con immagini

[pmhwp]

Ciao,
ho un immagine png contenente le rappresentazioni di un pulsante nello stato hover click e default.
Come realizzo il codice html per creare il pulsante con queste immagini negli stati corrispondenti?
Devo separare le immagini in tre file diversi?

Grazie.

[magodaniele]

si, devi separare l'immagine in 2 ed inserirla in un codice tipo:

<div>
<img src="immagine1.gif" alt="descrizione immagine di prova"
onmouseover="this.src='immagine2.gif';"
onmouseout="this.src='immagine1.gif';"/>
</div>


dovrei averlo scritto giusto, sono andato a memoria
in caso correggetemi pure

[MarcioPG]

Poui anche lasciarla intera usando l'immagine come sfondo di un elemento Block vuoto delle dimensioni opportune e cambiando la proprietà "style.backgroundPosition":

<div 
    style="
      display: block;
      width: 128px;
      height: 128px;
      background: url('test.png') no-repeat 0 0;
    "
    onClick="this.style.backgroundPosition='0 -128px'; return false;"
    onMouseOver="this.style.backgroundPosition='0 -256px';"
    onMouseOut="this.style.backgroundPosition='0 0';"
></div>

In questo modo tra l'altro ti assicuri che i "cambi di immagine" siano imemdiati dato che il browser carica l'immagine intera e la "sposta". Con immagini diverse qualche browser potrebbe caricare l'immagine solo quando necessario introducendo un "lag" percepibile.