Ciao a tutti,
ho una questione che non sono ancora riuscita a risolvere.

Ho una lista di immagini(oltre 50) di colore girgio.Queste immagini sono miniature e fanno rifgerimento a dei prodotti.
Sono riuscita a fare un rollover in maniera tale che andando sopra le immagini di colore grigio queste diventino nere.(Si tratta ovviamente di due immagini una grigia e una nera)
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>

[img]before.gif[/img]


Il mio problema è questo fare in modo che all'onclick l'immagine selezionata diventi nera.
Dopo di che se clicco su di un'altra immagine quella cliccata prima deve ritornare grigia mentre quella appena cliccata deve essere nera.

Avete qualche soluzione in merito???
Io utilizzo prototype e script.aculo.us


grazie mille