Tag <a> che mi resti nello stato hover se cliccato...

[goat]

Ho fatto una ricerchina su 'sto forum, ed ho trovato molti spunti e tanti esempi che però non fanno al caso mio.
Prima di tutto il JS che uso:

function showPic (whichpic) { 
    if (document.getElementById) { 
        document.getElementById('placeholder').src = whichpic.href;
        return false; 
    } else { 
        return true;
    } 
} 

E poi il codice che metto nell'HTML:

[url="images/lavoro01/01.jpg"][/url]
[url="images/lavoro01/02.jpg"][/url]
[url="images/lavoro01/03.jpg"][/url]

[img]images/lavoro01/01.jpg[/img] 

Con 'ste poche righe riesco a far caricare nella stessa pagina n numero di immagini.
Sul tag <img> noterete che la prima ad essere visualizzata di default è 01.jpg.
A seconda del tag <a> che si clicca viene caricata l'immagine corrispondente.

La cosa funzia egregiamente.
La class="button-quadratino" ha anche uno stato :hover, quindi quando vado sopra al tag <a> col mouse il quadratino mi diventa rosso.
Come riesco a fare in modo che al click dello stesso lo stato :hover persista?
Ho provato con :active ma ciccia.
Si può fare modificando unicamente il codice JS?
Oppure devo ricorrere ad un linguaggio lato serve?
Grazie,
goat

[br1]

Dipende forse dall'ordine nel quale hai dichiarato nel css gli stati :active e :hover ... posta il CSS che hai usato, per ora ti sposto su CSS, eventualmente chiedi al moderatore di rispostarti

[goat]

E allora eccovi il CSS:

.button-quadratino {
    position:relative;
    width:22px;
    height:22px;
    background:url(../images/button-quadratino.gif) top left no-repeat;
    overflow:hidden;
    float:left;
}
.button-quadratino:hover {
    background-position:bottom left;
} 

Comunque con :active mi funzia correttamente solo su IE.
La classe al tag <img> serve solo a dare alle immagini un bordo di 4px.
Resto in attesa d'illuminazioni.
goat

[Sgro]

Usa lo stile di hover anche con :active e :focus (mettili entrambi) e dovresti avere risolto.

Ciao

[goat]

Ok, fatto e grazie.
Adesso funziona con IE e FF, mentre con Safari e Opera ancora niente.
Se qualcun'altro ha consigli o links da passare...

Ah, ho messo le pseudoclassi nell'ordine: hover, active, focus.