Settare "visited" su pulsante immagine...

[goat]

Oilà. Ho fatto un po' di test e non sono riuscito a fare 'sta cosa. Ho una pagina con diverse icone, alla pressione di ogniuna si apre una pop-up. Oltre ai due stadi per l'effetto di rollover, vorrei che le miei icone già cliccate dall'utente visualizzassero un terzo stadio.
Ho provato con "background", però riesco solo ad ottenere l'effetto di rollover.

Grazie,
goat

[Mich_]

Gli stati di un link sono quattro, individuati dalle apposite pseudo-classi.
In IE le pseudoclassi funzionano solo per i link, mentre in altri browser l'hover funziona per ttuti glioggetti.

Le pseudoclassi sono (occhio all'ordine):
:link
:visited
:hover
:active

Quindi, cercando di interpretare la tua domanda, supponendo che tu abbia un HTML del genere:
[img]...[/img]

il CSS dovra` essere del tipo:
.icona img { /* tutte le caratteristiche comuni */ }
.icona:link img { background-color: blue; }
.icona:visited img { background-color: green; }
.icona:hover img { background-color: red; }
.icona:active img { background-color: orange; }

Nota che in questo caso l'icona dovra` avere uno sfondo trasparente, altrimenti non si vedra` lo sfondo definito.

[goat]

Ma allora non posso fare in modo che ad ogni pseudo classe sia associata un'immagine differente? Quello che vorrei è che a c cambiare non fosse il colore di background, bensì l'icona stessa.
Grazie...

[Mich_]

Con i CSS puoi cambiare le caratteristiche del CSS, non il contenuto.

Se la tua icona e` lo sfondo del tuo oggetto, allora puoi farlo: definisci per ogni pseudoclasse uno sfondo diverso:
background-image: url(immagine.gif);

Nota che dentro l'oggetto ci deve sempre essere qualcosa. Un oggetto vuoto (come contenuto) puo` venir ignorato.

Quindi ti consiglio di scrivere:
clicca qui

poi nel CSS:
#icona { /* tutte le caratteristiche comuni */ }
#icona:link { background-image: url(icon1.gif); }
#icona:visited { background-image: url(icon2.gif); }
#icona:hover { background-image: url(icon3.gif); }
#icona:active { background-image: url(icon4.gif); }

Nota che ho usato un id anziche` una classe, perche` imamgino il link sia unico (ma posso essermi sbagliato).

[goat]

Ok, ho finalmente trovato un po' di tempo da dedicare ai codici che mi hai passato.

Questo il mio CSS:

#icona:link {background-image: url(up.gif);}
#icona:visited {background-image: url(down.gif);}
#icona:hover {background-image: url(over.gif);}

E questo il mio codice HTML:

<a href="01.html" id="icona">
[img]icona.gif[/img]</a>


La mia icona.gif che ho linkato è trasparente, permettendomi così di visualizzare le immagini di background. Con questo codice la cosa funziona, però io alla pressione della mia icona vorrei far aprire una popup e, non appena aggiungo href="#" onclick="...", ecco che non funziona più.
Nello specifico l'icona mi parte con la posizione "down.gif", mentre dovrebbe partirmi con la posizione "up.gif" e una volta cliccata adottare la posizione "down.gif". Ho forse dimenticato qualche righetta di codice?

goat

[Mich_]

E` un problema JS. Manca il return false;
<a href="#" onclick="tuoprogramma; return false;"


Invece per vedere la posizione "up.gif" devi svuotare la cache. Infatti il tuo browser e` gia` stato nel link, e se lo ricorda.

In alternativa per fare le prove nell'href aggiungi un ? e un valore sempre differente, ad esempio:
href="01.html?123"
Viene ignorato dalla pagina caricata, quindi non da` problemi, manon viene riconosciuto dal browser come pagina gia` visitata.

[goat]

Bene, ora il mio codice HTML appare così:

<a href="01.html?1" onclick="apriFinestra( 'pop01.html', 500, 500 ); return false;" class="icona">
[img]icona.gif[/img]</a>
<a href="02.html?2" onclick="apriFinestra( 'pop02.html', 500, 500 ); return false;" class="icona">
[img]icona.gif[/img]</a>
<a href="03.html?3" onclick="apriFinestra( 'pop03.html', 500, 500 ); return false;" class="icona">
[img]icona.gif[/img]</a>
<a href="04.html?4" onclick="apriFinestra( 'pop04.html', 500, 500 ); return false;" class="icona">
[img]icona.gif[/img]</a>

Ottengo che sia per IE e FF il funzionamento è il medesimo; i pulsanti mi si visualizzano nella posizione "up.gif". L'effetto di hover funzia, però una volta cliccati e aperta la pop-up non si settano nella posizione "down.gif" in quanto già visitati. Manca ancora qualcosina?
Inoltre da IE a FF ho qualche problema di allineamento dei pulsanti, comunque provo a risolvere 'sta cosa che tengo una teoria...

[Mich_]

Devi modificare la stringa dopo il ? ogni volta che editi la pagina e vuoi provare a vedere la situazione :link.
Non serve che i vari link abbiano stringhe diverse fra loro.
Come dicevo e` un problema di cache del browser con cui fai le prove.

Per far funzionare la cosa anche in browser senza JS, conviene usare la sintassi:
[img]icona.gif[/img]

E nel CSS:
.icona img { width:20px; height:20px; border:0; }

Non conviene usare formattazioni HTML che sono deprecate.


Per l'allineamento del browser IE, ci sono degli hack da applicare. Ne trovi in questo forum (fai una ricerca), oppure in siti dedicati (constile.org, ... li trovi tra i "link utili").

[goat]

Spiacente di prolungare la discussione, ma nonostante le ultime modifiche applicate la situazione non cambia: vedo i miei links nella posizione "up", quando vado loro sopra con il mouse ecco che mi si visualizza l' "over", ma quando li clicco per aprire le pop-up, anche modificando il valore numerico dopo "?", questi non acquistano la posizione "down", bensì tornano nella posizione "up". Questo sia con IE e FF.
Per quanto riguarda il piccolo problema di allineamento vado senz'altro a spulciarmi un po' di links utili.
goat