posso ottenere questo con i css?

[freetech]

salve, poco fa ho creato un pulsante con flash, in pratica ho disegnato due cerchi con una scritta in modo che quando passo il mouse il cerchio cambia colore. Il tutto l'ho inserito in un div, adesso luce dei due file immagine ottenuti....potrei ottenere la stessa cosa usando esclusivamente i css?? Nel mio file css esterno ho provato a definire a:link a:visited e a:hover assegnando ad ognuno un background-image con le due immagini che ho creato....ma non ho avuto l'effetto sperato.....sapete darmi una dritta?
Grazie mille

[salasir]

Puoi postare un pezzo di codice e la relativa porzione di CSS?
Così senza niente da guardare è un po' difficile ...

[mahamatt]

ho provato a definire a:link a:visited e a:hover assegnando ad ognuno un background-image con le due immagini che ho creato....

il procedimento che spieghi è corretto...

ma non ho avuto l'effetto sperato.....

....che significa??? quale effetto hai avuto invece?

[J-MK]

Io lo faccio in javascript di solito, in modo che il pulsante sembri spento ma si "accende" quando ci passi su il mouse. Se vuoi ti posto il codice.

[freetech]

per mahamatt:
l'effetto che vorrei avere è quello di un pulsante cioè del cerchio che cambia colore quando passo sopra il mouse....
quindi ho utilizzato questo codice:


a#pulsante:link{background-image:
(e ho inserito la prima immagine}

a#pulsante:visited{background-image:
(e ho inserito sempre la prima immagine in modo che non cambiasse dopo che uno ha visitato il link)
}



a#pulsante:hover{background-image:ho inserito la seconda immagine in modo che quando si passava il mouse sopra doveva apparire questa
}

dopo di che all'interno di un div ho richiamato il tutto utilizzando il codice:

a href="collegamento id="pulsante></a (al centro non ho scritto nulla perchè le due immagini sono già complete di scritta)

(tralascio le parentesi angolari per ovvi motivi....

insomma alla fine il risultato che ho ottenuto è un bel riquadro bianco, cioè non si vedeva nulla

Sapresti dirmi in cosa ho sbagliato?

Grazie mille

[salasir]

#pulsante a:link{background-image:
(e ho inserito la prima immagine}

#pulsante a:visited{background-image:
(e ho inserito sempre la prima immagine in modo che non cambiasse dopo che uno ha visitato il link)
}

#pulsante a:hover{background-image:ho inserito la seconda immagine in modo che quando si passava il mouse sopra doveva apparire questa
}

E per l'immagine verifica il percorso dal CSS all'immagine (non dalla pagina).

[freetech]

certo, usando dreamweaver quando ho inserito il codice background-image mi è apparsa la finestrella che mi chiedeva se volevo sfogliare il file......ed infatti ho scelto le due immagini che avev creato, che tra l'altro avevo inserito nella stessa cartella dove si trova il file html quindi non c'è bisogno di specificare un percorso per richiamarla ma semplicemente il nome tipo url(pulsante.png);
....non capisco cosa bisogna fare

[mahamatt]

Dunque: <a> è, per sua natura, un elemento inline. In questo caso occorre farlo diventare un elemento blocco, per cui nel css devi definire alcune cose:

a#pulsante {
       display:block;
       padding:0;
       width:30px;    /* valore ipotetico */
       height:30px;   /* valore ipotetico */
       }

Inoltre se :link e :visited usano lo stesso background, puoi accorparli separandoli con la virgola:

a#pulsante:link, a#pulsante:visited { background-image: url (pulsante-spento.gif); }
a#pulsante:hover { background-image: url (pulsante-rollover.gif); }

Altra cosa importante: nell'html devi mettere qualcosa tra <a> e </a>. Prova con un bel &amp;nbsp; e vediamo cosa succede.

Se, dopo aver controllato bene il codice, ancora non funziona, questo esempio utilizza immagini in rollover, quindi (in teoria) si tratta dello stesso caso in cui ti trovi tu. Prova a paragonare i codici... al limite posta qui il pezzo di css vero e proprio e poi vediamo il da farsi.

[freetech]

siiiiiiii!!!! Funzionaaaaa!!! Grazie mille!!!!!
Però è sorto un piccolo problemino.....il collegamento con il cambio immagine funziona perfettamente, ma avendo inserito il tag per un semplice spazio come mi hai consigliato sul monitor mi visualizza sull'immagine un piccolo trattino come questo -.....come è possibile?
Nelle altre parti del sito che ho utilizzato non mi appare nulla...

[mahamatt]

è la sottolineatura (di default) dei link.
oltre ai valori già aggiunti in precedenza in a#pulsante, inserisci il seguente:

a#pulsante {
       text-decoration:none;
       }