pulsanti che cambiano con onclick

[Gecko]

Un saluto a tutti,

premetto che sono alle prime armi con Javascript.

Ho un menu di 7 pulsanti disegnati (immagini gif per intenderci, con delle scritte inserite a mano con Gimp) e uno script che, richiamato con un evento onclick, "dovrebbe" sostituire un singolo pulsante di colore blu con il corrispettivo pulsante di colore bianco, lasciando inalterati i restanti 6 (i quali fanno la stessa operazione, se ci si clicca sopra).

Lo script funziona solo in parte, dato che se clicco su uno di questi pulsanti per cambiarlo si modificano anche gli altri .Se clicco sul pulsante blu dei "contatti", per esempio, diventa bianco ma all'interno del div TUTTI i restanti pulsanti blu ("chi siamo", "la sede", ecc...) vengono sostituiti con il pulsante appena cliccato. Ho tentato di modificarlo, ma senza risultato.

Il codice è il seguente:

function change(imgNameChg,imgSrcChg,imgSrc1){
clear(imgSrc1);
movepic(imgNameChg,imgSrcChg);
}

function clear(imgSrcClr){


document.button1.src=imgSrcClr;

document.button2.src=imgSrcClr;

document.button3.src=imgSrcClr;

document.button4.src=imgSrcClr;

document.button5.src=imgSrcClr;

document.button6.src=imgSrcClr;

document.button7.src=imgSrcClr;


}
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}

La funzione change viene richiamata dall'onclick dell'immagine:

<img src="http://forum.mrwebmaster.it/images/contatti.gif" name="button1" "border="0"
onclick="change('button7','images/contatti-changed.gif','images/contatti.gif')">

// la procedura è uguale per tutte le immagini

Per risolvere, ho modificato così la funzione change:

function change(imgNameChg,imgSrcChg,imgSrc1){
ButArr = new Array(7);
for (i=1; i<=ButArr.length; i++){
var tot = document.getElementsByName("button"+ButArr);
tot = imgSrcChg;
clear(tot);
movepic(imgNameChg,imgSrcChg);
}
}

ma così facendo mi cambia tutte le immagini blu con quelle bianche. Come potrei fare per modificare solo l'immagine del bottone cliccato?

Grazie in anticipo a chiunque mi risponderà!

 

[softhare]

Magari puoi eliminare lo script ed usare solo linee come la seguente per definire la immagini:

<img src="http://forum.mrwebmaster.it/images/contatti.gif" name="button1" border="0" onclick="document.button1.src='images/contatti-changed.gif';">

Cambiando i nomi dei file e delle immagini.

Ma...dopo che l'immagine è cambiata, che altro deve fare?
Deve venire ripristinata o resterà "changed" fino alla uscita dalla pagina?

 

[alessandro1997]

Quello che ha scritto softhare si può anche riassumere più semplicemente in:

<img src="http://forum.mrwebmaster.it/images/contatti.gif" name="button1" border="0" onclick="this.src='images/contatti-changed.gif';" />

Così non hai neanche bisogno di dare un nome alle immagini.

 

[Gecko]

Grazie per le risposte. Domattina provo.

Però credo che facendo come dite il pulsante, una volta cliccato, resta bianco sempre, mentre io avrei bisogno che si "spegnesse" quando clicco su un'altro di essi.

@softhare

In pratica ho 7 pulsanti di colore blu in un div. Ogni volta che clicco su uno di questi l'immagine deve cambiare e diventare bianca (ho nella stessa cartella sia le immagini dei pulsanti blu che quelle dei bianchi). Una sorta di acceso/spento di un singolo pulsante, se clicco su un altro pulsante l'mmagine torna come prima e si accende invece il pulsante appena cliccato.

 

[softhare]

Puoi usare una cosa di questo genere:

<SCRIPT LANGUAGE="JavaScript">
function unodisette(quale){
for(p=1;p<8;p++){
if(p==quale){
j='document.pulsante'+p+'.src="http://forum.mrwebmaster.it/images/pulsante'+p+'.gif";';eval(j);
}else{
j='document.pulsante'+p+'.src="http://forum.mrwebmaster.it/images/pulsante'+p+'_attivo.gif";';eval(j);
};
};
</SCRIPT>

<IMG NAME="pulsante1" SRC="http://forum.mrwebmaster.it/images/pulsante1.gif" ONCLICK="unodisette(1);">
<IMG NAME="pulsante2" SRC="http://forum.mrwebmaster.it/images/pulsante2.gif" ONCLICK="unodisette(2);">
...
<IMG NAME="pulsante7" SRC="http://forum.mrwebmaster.it/images/pulsante7.gif" ONCLICK="unodisette(7);">

Cambiando semmai i nomi dei file grafici dei pulasnti, in maniera di poterli trattare per indice (1-7) anzichè coi nomi (contatti, etc).

 

[Gecko]

Ho provato con il tuo esempio e ha funzionato alla grande!

Grazie mille per l'aiuto softhare! :fonzie: