stati visited e active sulle immagini però

[Osterello]

Ciao,
posto in CSS perchè credo sia il posto giusto.

Vorrei avere i 4 stati dei css sui link (link, visited, hover e active) impostati su 4 immagini anzichè su 4 formattazioni del testo.

Come posso fare?

Vi prego è abbastanza urgente e importante.

GRAZIE!

[Mich_]

Non credo di aver capito.

Vuoi cambiare l'immagine di sfondo (di un <div> / di un link / ...)a seconda dello stato?

[mandp]

imposta per i diversi stati del tag <a> una immagine diversa in background.
ricordati anche dello stato "focus" oltre che dei tradizionali "link", "visited", "hover" e "active" perchè sebbene IE non lo tratti in modo diverso, in realtà lo stato "focus" descrive appunto un link su cui si va mediante navigazione tabulare cioè con i tab o con i tasti.
a:link {
...
background-image: url(percorso/nome_img.estensione);
...
}
il tutto per ogni singolo tipo di link cioè lo stesso anche per a:visited, a:hover, a:active e a:focus.

però non ho capito se oltre all'img di sfondo ci metterai anche del testo la cui formattazione resterà invariata oppure se vorresti solo metterci l'immagine...

[mandp]

per completezza di risposta, ecco il seguito.
se hai del testo nei link e inoltre vuoi una img diversa per ogni stato segui il post di prima, se invece vuoi solo una img di fondo che cambia in base allo stato ma non vuoi vedere il testo, la cosa è un po' più complessa ma si può fare sebenne qui siamo a limite della decenza per quanto concerne la correttezza nell'uso dei CSS

in pratica devi impostare i diversi sfondi come da esempio precedente ma in più devi inserire il testo del link all'interno di un tag <span>. per es:
<span>link</span>

a questo punto nelle regole CSS devi impostare una larghezza e una altezza predefinite per l'elemento <a> (e lo fai per ogni stato del link, cioè per link, hover...), valori che ovviamente saranno uguali a quelli dell'immagine. in questo modo puoi togliere visibilità al testo impostando una regola del tipo:
a span {
display: none;
}

così non fai vedere il testo. widht e height li devi impostare obbligatoriamente per i vari stati di <a> perchè altrimenti impostando a "none" la visibilità dell'elemento Span anche l'elemento A sparirebbe.

[Osterello]

perfetto, era proprio quello che cercavo!
GRAZIE

quando ho un attimo ci provo e spero di riuscirci!

[Osterello]

funziona, ho messo però anzichè uno span un

<a haref="pippo.htm class="rana">nbsp;</a>

ci sono controindicazioni?

un'altra cosa, come imposto le dimensioni dello span? dal css?

thanks

[Francis87]

si, da css va benissimo

span {
 width: 200px;
 /* ... */
}

[Osterello]

ottimo, sembra funzionare.

non ho ben capito però lo stato focus, come si imposta? a:focus?

[mandp]

Originariamente inviato da Osterello
non ho ben capito però lo stato focus, come si imposta?

lo devi impostare esattamente come gli altri cioè come link, visited etc...
indica uno stato dell'elemento A così come lo indicano gli altri. vale per quando l'elemento A ha ricevuto il focus perchè l'hai selezionato con la navigazione mediante il tasto TAB oppure se lo selezioni con un tasto, per es. il tasto P, se hai impostato per i link A la proprietà accesskey="tasto_di_accesso" che ti consente di navigare tra i link usando ALT+i_vari_tasti

[Osterello]

Ciao,
ho fatto tutto il discorso degli span, e su IE funziona benissimo.

Purtroppo sul browser del mac safari mi da un pò di problemi:

www.sdpautotrasporti.it/alecastiglioni

le img sono i quadrati grigi/arancio in basso

soluzioni?