Rollover con solo immagini (no testo)

[andreac_fe]

Ciao a tutti,

ho provato a cercare tra thread simili ma per ora non ho trovato nulla per risolvere il mio problema.

Dovrei creare il classico effetto rollover su delle immagini di un menù (ognuna delle quali è diversa dalle altre) e non posso usare javascript. E' possibile farlo con css. Attenzione, il menù è solo grafico e non c'è testo, quindi direi che non posso fare scambi di immagini di sfondo.

Qualcuno ha info a riguardo o qualche link utile.

Grazie

Andrea

[ricman]

Scusa... forse non ho capito... Hai un menu con le img, senza testi, e non vuoi usare le immagini?

[custanz]

prova a guardare qua pulsanti con rollover

[andreac_fe]

Custanz,

grazie, avevo gia' visto quell'articolo ma in quel caso si parte sempre da un link di testo che nel mio caso non c'e', io dovrei usare solo immagini. Quindi una immagine con relativo link e quando il mouse ci passa sopra questa viene scambiata con un'altra.

Ricman, grazie, io dovrei usare solo immagini.

Grazie

[ricman]

Originariamente inviato da andreac_fe
grazie, avevo gia' visto quell'articolo ma in quel caso si parte sempre da un link di testo che nel mio caso non c'e', io dovrei usare solo immagini. Quindi una immagine con relativo link e quando il mouse ci passa sopra questa viene scambiata con un'altra.

Ricman, grazie, io dovrei usare solo immagini.

Il tag A non ti obbliga a usare il testo... ti basta mettere le foto come sfondo e da css gestire l'hover...
Mi spiego:

<ul>[*]
  ... ...
  ...

CSS
a {
width:200px;
height:24px;
display:block
background: #666 url(fotina_a.jpg) no-repeat;
}
a:hover {
background: #666 url(fotina_b.jpg) no-repeat;
}

(... ho scritto alla svelta ... spero di non aver fatto casino)

[andreac_fe]

Ricman, grazie mille!

Funziona alla perfezione, ottimo, pulito, semplice!

Ti chiedo un consiglio quindi se ho cinque pulsanti diversi, mi conviene creare 5 classi in css diverse ognuna per ogni pulsante per gestire i rollover?

Grazie ancora, sono esterefatto di quante cose si possano fare con i CSS.

Andrea

[ricman]

Fai 5 classi e le applichi ognuna al tuo pulsante...

[andreac_fe]

fatto carissimo e funziona perfettamente!

Grazie davvero, sei stato una risorsa davvero utile, grazie ancora!

Andrea

[kappa3]

approfitto del topic per chiedere aiuto per questo benedetto rollover del menù usando le immagini, il mio codice è questo

html:

[img]img/home1.png[/img]

css:

a:hover 
{
background:url(img/home2.png);
}

a
{
background:url(img/home1.png);
}

non funziona il rollover, ho provato anche diverse altre varianti che ho trovato in altri topic e in internet, ma non ho risolto nulla

[ricman]

Originariamente inviato da kappa3
non funziona il rollover, ho provato anche diverse altre varianti che ho trovato in altri topic e in internet, ma non ho risolto nulla

Così non ci aiuti molto...
Cmq in generale prima metti A e dopo A:Hover.
Poi l'immagine di sfondo SE IL PERCORSO E' CORRETTO prova a richiamarla così:

background-image: url(......);