Bottone onPress in Html?

[Lisetta]

Ciao a tutti!

Sono nuova di questo forum, spero possiate aiutarmi.

Ho avuto una richiesta abbastanza particolare, la creazione di un bottone con due gif (stato normale e premuto) da creare però con l'html.

In flash c'è questa funzione, ma purtroppo la richiesta è stata ben precisa.

Dite che è una cosa fattibile? Qualcuno ci ha già provato?

 

[WpStyle]

prova così:

<a href="qui_tuo_link"><img src="immagine1.gif" id="rollover" style="border: none;" onmouseover="this.src='immagine2.gif';" onmouseout="this.src='immagine1.gif';" /></a>

spero sia chiaro...
lo style style="border: none;" serve a non far vedere il bordo dell'immagine...lo puo mettere nel Css se gli usi altrimenti lascia così.

Ciao

 

[Lisetta]

Si, ci avevo già pensato al rollover, ma purtroppo lo vogliono solo al click...

Per togliere il bordo c'è anche il codice in html, ma mi sto accorgendo che certe volte funzionano di più i Css e sono più sicure dell'html.
Se posso infatti uso il css che mi hai segnalato tu.

Grazie comunque!! :fonzie:

 

[Lisetta]

A proposito di css... forse sto arrivando alla soluzione...

Ho fatto tre immagini.
Una con il bottone iniziale, una con il bottone al click e un'altra trasparente, perchè mi sembra di aver capito che con i css non si possa inserire un immagine ma solo uno sfondo, però mi serve qualcosa di quella dimensione a cui dare il link.

lo puoi vedere su:
http://workelisaresmini.altervista.org/bottone.html

Funziona ma non si vede l'immagine iniziale e quella al click è spostata in giù.

il codice che ho utilizzato è:
<a href="#"><img src="imm_trasparente.gif" width="125" height="23" /></a>

mentre il css è:
a:active {
background-image: url(active.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
a:link {
background-image: url(link.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

 

[WpStyle]

scusa avevo capito male io...prova così

<a href="qui_tuo_link"><img src="immagine1.gif" id="click" style="border: none;" onclick="this.src='immagine2.gif';" onmouseout="this.src='immagine2.gif';" /></a>

 

[Lisetta]

quasi... come me lo hai dato cambia dopo che rilascio, ma il cambiamento è poco visibile.

Ho fatto una piccola modifica al tuo codice... ora funziona come avevo bisogno!!!

<a href="#"><img src="link.jpg" id="click" style="border: none;" onmousedown="this.src='active.jpg';" onmouseout="this.src='link.jpg';" /></a>

se vuoi vederlo anche tu:
http://workelisaresmini.altervista.org/bottone2.html

Grazie mille!!! Sei un grande!!!

:fonzie: