link e css. HELP

Sto cercando di creare un menù laterale per wordpress in stile desktop di windows, quindi con icone e testo sotto.
Ho creato un'icona per lo stato del link "normale e visitato" (nome tipo: "mail.jpg") e una per lo stato del link quando si clicca (nome tipo: "mail_l.jpg"), solo che non ho idea di come impostare i css, perchè dovrei inserire una stringa del tipo "get img name+_l.jpg" per il secondo stato, solamente che non conosco la sintassi che fa al caso mio..
Qualcuno potrebbe aiutarmi?
Grazie. spero di essere stato abbastanza chiaro.

[funcool]

Non ho ben capito, però prova a fare così:

<img src="mail.jpg" onclick="this.src='mail_l.jpg';" />

Si il codice funziona, ma io volevo che metta l'immagine mail_l.jpg solamente quando clicco e che poi ritorni l'immagine mail.jpg
Inoltre qualcuno sa se è possibile stabilirlo con i CSS (quindi generalizzato con un codice "quando clicchi cerca immagine <prendinomeimmagine+_l>")?

[funcool]

Si il codice funziona, ma io volevo che metta l'immagine mail_l.jpg solamente quando clicco e che poi ritorni l'immagine mail.jpg

<img src="mail.jpg" onclick="this.src='mail_l.jpg';" onmouseout="this.src='mail.jpg';" />

Inoltre qualcuno sa se è possibile stabilirlo con i CSS (quindi generalizzato con un codice "quando clicchi cerca immagine <prendinomeimmagine+_l>")?

Quando clicchi su cosa e dove deve apparire l'immagine?

Quando clicchi su cosa e dove deve apparire l'immagine?

io intendevo quando clicco sull'immagine si apre un collegamento <a href>
tipo bottone quando clicco rimane l'immagine mail_l.jpg fino a quando non rilascio il tasto del mouse, e quando lo rilascio ritorna l'immagine mail.jpg

[dreadnaut]

via css, puoi settare l'immagine come sfondo del link per i selettori A:focus o A:hover, per quando il link è stato premuto, o quando è semplicemente sotto il puntatore del mouse

non mi riesce proprio di farlo venire fuori sto link...
vediamo qualcuno mi può fare un esempio con questi due link? (magari nella stessa pagina?)
link 1
linka alla homepage del sito di altervista
icone: www.blografic.altervista.org/immagini/HOME.jpg <---per il link normale
www.blografic.altervista.org/immagini/HOME_H.jpg <---per il link cliccato

link 2
linka alla homepage del forum di altervista
icone: www.blografic.altervista.org/immagini/MAIL.jpg <---per il link normale
www.blografic.altervista.org/immagini/MAIL_H.jpg <---per il link cliccato

ringrazio già per chi si prenderà la briga di spiegarmelo, ma proprio non li ho capiti...

[dreadnaut]

Per imparare, sarebbe molto più utile vedere cosa hai scritto tu e correggerlo.
Oggi e solo per oggi, puoi dare un occhiata a questo

ehm.. ti ringrazio, a me interessa il 2° (focus) ma non mi funziona nemmeno sul tuo sito... cioè mi visualizza la prima foto (www.blografic.altervista.org/immagini/MAIL.jpg) ma non la seconda (www.blografic.altervista.org/immagini/HOME_H.jpg)

[edita] anzi, no l'hover funziona, ma il focus no..

[dreadnaut]

se il focus non ti funziona, probabilmente stai usando Internet Explorer, e non ci possiamo fare niente

trovato.. non era focus ma active che mi serviva.. vorrei sapere se è possibile creare un active che quando rilasci il tasto del mouse ritorna allo stato iniziale.. GRAZIE MILLE dread!
PS si uso IE

[dreadnaut]

ho aggiunto active all'esempio, così puoi provare i vari casi: l'unica differenza fra :focus e :active è che "focus" viene considerato anche se selezioni l'elemento da tastiera (ad esempio, con il tasto Tab), mentre active solo se lo "attivi" con il mouse.

Il problema di IE è che non considera focus, e mischia il suo comportamento con active, che quindi reagisce anche alla selezione-senza-attivazione (il suddetto Tab), e quindi ti tocca un hack in javascript. A questo punto, se proprio vuoi usare javascript, puoi fare un script che implementi l'intera animazione e bon.

Il mio consiglio sarebbe di lasciare il js fuori per questa cosa, e usare solo :focus. Se anche il pulsante non si rialza, il link dopo un istante aprirà la pagina richiamata, e non sarà così grave. Per la compatibilità con IE puoi aggiungere le regole per :active, o fregartene - IE7 a breve dovrebbe supportare correttamente :focus, e versioni precedenti degraderanno in semplici bottoni non animati.

Grazie mille, sei stato davvero disponibilissimo, appena ho un attimo di tempo mi leggo attentamente la pagina che hai linkato, e poi deciderò se ne vale veramente la pena di inserire javascript oppure no.

FunCool: Non fare UP, usa il tasto Edita.