CSS che gestisce effetto rollover per delle icone...

[goat]

'Giorno.
Per ottenere l'effetto rollover su delle icone uso il seguente CSS:

#pulsante_icona001{
width: 137px;
height: 132px;
overflow: hidden;
background: url(icone/001.jpg) top left no-repeat;
display: block;}

#pulsante_icona001:hover{
background-position: bottom left;}


Che vado a richiamare così dall'html:




Ora mi chiedevo: ma metti caso che mi ritrovi a dover gestire una fotogallery di oltre 100 immagini; sono spacciato? Nel senso che mi tocca duplicare il codice sopra per oltre 100 volte? Visto che le icone sono nominate con un numero progressivo so che potrei usare PHP per gestire la cosa, però i soldini che sgancia questo cliente non giustificano l'uso di un linguaggio lato server. Insomma: me la incarto e mi metto sotto, oppure avete qualche soluzione alternativa?
Grazie mille,
goat

[seed_squall_it]

La soluzione è più semplice di quello che sembra. Invece di usare l'id, usa un attributo class uguale per tutti i link. A quel punto crei il codice CSS per il rollover usando il selettore di classe, anziché quello di identificatore. Infine, puoi scrivere l'immagine di background tramite un attributo style diverso per ogni link.

.icona {
width: 137px;
height: 132px;
overflow: hidden;
background-position: top left;
backgroun-repeat: no-repeat;
display: block;
}

.icona:hover {
background-position: bottom left;
}

Non è proprio il massimo, ma se i soldi che sgancia il cliente non bastano per un linguaggio lato server, mi pare adeguata come soluzione.

[goat]

Ok, testato il tutto vedo che funziona bene e fa proprio al caso mio.
Grazie mille per il consiglio.
goat

[nikasil]

domanda fagiana:
ma se io voglio far cambiare colore all'icona come devo fare?
e soprattutto: a me le icone si alineano in verticale e non riesco a fare allineare in orizzontale

ciao!

[seed_squall_it]

Per "cambiare colore" all'incona basta che crei un'immagine che rappresenta i due stati del link (normale e over). quindi con due colori diversi. L'icona è sempre contenuta come sfondo nell'area del link. Dato che l'immagine è sempre posizionata come sfondo del link, ti basta modificare il valore di background-position per spostare l'immagine nella direzione che vuoi quando ci passi sopra col mouse. Quindi, dato che l'immagine è alta (o larga, dipende da come la fai) il doppio dell'area del link, mostrearà sempre una sua metà, che sarà quella relativa allo stato normale o over.

Cosa usi per la struttura dei link? Un elenco non ordinato (<ul>)? Se è così (ed è la struttura corretta in XHTML per un menu), basta che dichiari display: inline gli elementi[*], oppure puoi dichiararli float: left (meglio, perché così li trasformi in elementi a livello di blocco che sono più gestibili dai diversi browser).

[nikasil]

Originariamente inviato da seed_squall_it
Per "cambiare colore" all'incona basta che crei un'immagine che rappresenta i due stati del link (normale e over). quindi con due colori diversi. L'icona è sempre contenuta come sfondo nell'area del link. Dato che l'immagine è sempre posizionata come sfondo del link, ti basta modificare il valore di background-position per spostare l'immagine nella direzione che vuoi quando ci passi sopra col mouse. Quindi, dato che l'immagine è alta (o larga, dipende da come la fai) il doppio dell'area del link, mostrearà sempre una sua metà, che sarà quella relativa allo stato normale o over.

Cosa usi per la struttura dei link? Un elenco non ordinato (<ul>)? Se è così (ed è la struttura corretta in XHTML per un menu), basta che dichiari display: inline gli elementi[*], oppure puoi dichiararli float: left (meglio, perché così li trasformi in elementi a livello di blocco che sono più gestibili dai diversi browser).

dunque:
stavo provando con il tuo medoto sopra postato e riesco a cambiare l'immagine in rollover ma non ad allineare le altre icone in orizzontale.

In precedenza, o meglio in un'altra parte del sito, avevo usato:
ul.entrynav,ul.entrynav li{list-style:none;margin:0;padding:0}
ul.entrynav{float:left;width:100%;text-align:center}
ul.entrynav li{float:left;margin-left: -1px}
ul.entrynav a{display:block;width:88px;height:23px;
line-height:25px;background: url(images/home3.gif);
text-decoration:none;color: #666666;font-size: 9px; }
ul.entrynav a:hover,ul.entrynav li{display:block;width:88px;height:23px;
line-height:25px;background: url(images/home2.gif);
text-decoration:none;color: #C7C7C7; font-size: 9px; }

e nel html:
<ul class="entrynav">[*]Home[*]bla bla[*]bla bla[*]bla bla
ecc ecc....
[/list]

il problema è che nel caso sopra con ul l'icona è la stessa per tutte le voci (cambia solo la scritta contenuta tra i tag <a></a>)
mentre nel caso di ora sono tutte diverse l'una dall'altra e quindi questo sistema non va bene.....o almeno io non so come richiamare un'immagine diversa di volta in volta...

spero di essere stato chiaro....

in sintesi devo allineare in orizzontale delle icone tutte diverse tra loro, ma ovviamente con la stessa dimensione, ed avere l'effetto rollover.


grazie per l'aiuto!!

[seed_squall_it]

Facile...devi usare un id diverso per ogni tag <a>. Poi crei una regola di stile che imposta solo la background-image di ogni <a> in base all'id. Tuttavia questa tecnica richiede la creazione di due immagini distinte perché non è possibile spostare semplicemente l'immagine di sfondo (in teoria si può, ma se il carattere viene ridimensionato, parte della porzione nascosta dell'immagine viene visualizzata).

[*]Link 1[*]Link 2

ul {
padding: 0;
margin: 0;
}

ul li {
list-style: none;
padding: 0;
margin: 0;
float: left;
}

ul li a {
text-align: center;
padding: 0 0 0 18px;
margin: 0 18px 0 0;
line-height: 18px; /* Stabilisce un'altezza variabile del link in modo che il suo contenuto resti centrato verticalmente */
float: left; /* Risolve un problema di IE per Mac */
background-repeat: no-repeat;
background-position: left center;
}

ul li a#link1 {
background-image: url(IMMAGINE_NORMALE_1);
}

ul li a#link1:hover {
background-image: url(IMMAGINE_OVER_1);
}

ul li a#link2 {
background-image: url(IMMAGINE_NORMALE_2);
}

ul li a#link2:hover {
background-image: url(IMMAGINE_OVER_2);
}

[nikasil]

beh grazie molto...ora provo poi ti faccio sapere..

[nikasil]

il tuo sistema funziona!!!
peccato che mi scasini completamente il menù posto + in alto:
ul.entrynav,ul.entrynav li{list-style:none;margin:0;padding:0}
ul.entrynav{float:left;width:100%;text-align:center}
ul.entrynav li{float:left;margin-left: -1px}
ul.entrynav a{display:block;width:88px;height:23px;
line-height:25px;background: url(images/home3.gif);
text-decoration:none;color: #666666;font-size: 9px; }
ul.entrynav a:hover,ul.entrynav li{display:block;width:88px;height:23px;
line-height:25px;background: url(images/home2.gif);
text-decoration:none;color: #C7C7C7; font-size: 9px; }

e nel html:
<ul class="entrynav">[*]Home[*]bla bla[*]bla bla[*]bla bla
ecc ecc....
[/list]

questo si scasina completamente.......

[nikasil]

come non detto....ho creato un'altra classe ed è tutto ok

grazie!!!!!!!!!!!