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:

Codice PHP:
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:

Codice PHP:
[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