[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.