selezione immagine onclick

[stellina81]

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

[stellina81]

Ho provato ad usare questa funzione richiamandola sull'onclick dell'immagine
<script type="text/javascript">

function swap(where, native, substitute) {
if (where.src == native){
where.src = substitute;
} else {
where.src = native;
}
}

</script>
















il risultato però non è quello che cerco.
Infatti se clicco sulla prima immagine questa diventa nera, se clicco sulla seconda anche questa diventa nera MA l'immagine cliccata prima rimane nera mentre dovrebbe diventare grigia.

[cavicchiandrea]

function swap(imag,orig,camb)
{
var image = document.getElementsByTagName("img");
for(var i=0; i<image.length; i++){
if(image[i].id == imag.id){
image[i].src = camb
}else{image[i].src = orig}
}}

[img]images/attivo.png[/img]
[img]images/attivo.png[/img]
cosi funziona

[stellina81]

ti ringrazio per la soluzione che hai postato ma a me non funziona nel modo corretto tu l'hai testato?

Il probelma è questo al primo giro image[i].id è uguale a img1 e imag.id è uguale a img1
essendo i due valori uguali entro nell'if e proseguo con questo assegnamento image[i].src = camb.
Fin qui ok

al secondo passaggio sto analizzando la seconda immagine. image[i].id è uguale a img2 e imag.id è uguale a img1 I due valori sono DIVERSI quindi entro nell'else e faccio questo assegnamento image[i].src = orig

PROBLEMA quest'ultimo assegnamento mi cambia l'src della seconda immagine attibuendogli l'src della prima immagine con la conseguenza che la prima immagine è diventata nera e la seconda immagine ha preso l'immagine grigia della prima.

[img]images/thumb_12_2004.jpg[/img]


[img]images/thumb_12_2008.gif[/img]

[cavicchiandrea]

Originariamente inviato da stellina81
ti ringrazio per la soluzione che hai postato ma a me non funziona nel modo corretto tu l'hai testato?

Si perfettamente funzionante come puoi testare qui se non funziona metti online un esempio.

[stellina81]

prova questo qui
forse mi sono espressa male ...

[cavicchiandrea]

funzione:

function swap(imag,imag1)
{
//Qui scrivi il percorso dell'immagine
var path = "http://portatileandrea/pixel/"
//caretella immagini
var cartella = "images/"
//Qui imposti array con il nome delle immagini di default off
var ImageOff = new Array("immagine_b.gif","foto2_b.gif")
//Qui imposti array con il nome delle immagini di on cliccate
var ImageOn = new Array("immagine_n.gif","foto2_n.gif")
var image = document.getElementsByTagName("img");
for(var i=0; i<image.length; i++){
if(i == imag && image[i].src == path+cartella+ImageOff[imag]){
image[i].src = cartella+ImageOn[imag]
}else if(i == imag && image[i].src == path+cartella+ImageOn[imag]){
image[i].src = cartella+ImageOff[imag]}else{image[i].src = cartella+ImageOff[imag1]}
}}

richiamata cosi

[img]images/immagine_b.gif[/img]
  [img]images/foto2_b.gif[/img]

il tutto visibile qui
Spero che al cliente le piaccia

[stellina81]

ma se hai n immagini come si imposta onclick="swap(1,0)" ????

[cavicchiandrea]

Originariamente inviato da stellina81
ma se hai n immagini come si imposta onclick="swap(1,0)" ????

Lo sviluppato su due immagini non è detto che funzioni con + immagini in tal caso probabilmente si dovrebbe sviluppare diversamente, lavorando sulle effettive immagini.

[stellina81]

Ciao a tutti,
ho un problema al quale non so trovare una soluzione.
Ho una lista di immagini (oltre 50) di colore grigio che fanno riferimenti a dei prodotti specifici.

La mia pagina web è data dallo scroll di queste immagini e dalla visualizzazione del primo prodotto della lista, visibile all’interno di un box tramite un onload. La pagina NON contiene alcun frame.

Il mio problema è questo:
quando seleziono un prodotto dalla lista di immagini, l'immagine grigia relativa al prodotto appena cliccato deve essere sostituita da un'immagine NERA, la stessa che utilizzo all'interno di 'onmouseover'.
Se poi scelgo un altro prodotto, l'immagine appena cliccata deve diventare NERA mentre tutte le altre immagini devo ritornare grigie.
QUINDI
immagine cliccata/selezionata ->> nera
immagine non selezionata ->> grigia

con "_n" identifico le immagini "nere"

	<a href="index.php?id=528" title="" onclick="loadPosition('index.php?id=528','box_container');return false;" onmouseover="document.getElementById('img_528').src='http://test/foto/armadio_n.gif'" onmouseout="document.getElementById('img_528').src='http://test/foto/armadio.gif'">
		

	</a>

	<a href="index.php?id=525" title="" onclick="loadPosition('index.php?id=525','box_container');return false;" onmouseover="document.getElementById('img_525').src='http://test/foto/divano_n.gif'" onmouseout="document.getElementById('img_525').src='http://test/foto/divano.gif'">
		

	</a>

	<a href="index.php?id=522" title="" onclick="loadPosition('index.php?id=522','box_container');return false;" onmouseover="document.getElementById('img_522').src='http://test/foto/letto_n.gif'" onmouseout="document.getElementById('img_522').src='http://test/foto/letto.gif'">
		

	</a>
ecc...

Le immagini sono molte di più...

Sapreste darmi qualche indicazione in merito???

grazie