pulsanti che cambiano con onclick

Gecko

Nuovo Utente
17 Mar 2010
7
0
0
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

Utente Attivo
11 Feb 2010
57
0
0
Friuli
www.softhare.it
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

Utente Attivo
6 Ott 2009
5.302
1
0
24
Roma
alessandro1997.netsons.org
Quello che ha scritto softhare si può anche riassumere più semplicemente in:
HTML:
<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

Nuovo Utente
17 Mar 2010
7
0
0
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.
 
Ultima modifica:

softhare

Utente Attivo
11 Feb 2010
57
0
0
Friuli
www.softhare.it
Puoi usare una cosa di questo genere:

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

Nuovo Utente
17 Mar 2010
7
0
0
Ho provato con il tuo esempio e ha funzionato alla grande!

Grazie mille per l'aiuto softhare! :fonzie:
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Problema Pulsanti Html e PHP, due submit che aggiornano la pagina .. PHP 0
D Che caratteristiche deve avere un gruppo di pulsanti di scelta in phpMyAdmin? MySQL 10
s@r@ Pulsanti interattivi che non si vedono Javascript 5
B Evitare che explorer blocchi pulsanti flash Flash 3
4 Pulsanti woocommerce CMS (Content Management System) 0
D [Javascript] pulsanti per comandi shell con php e ajax Ajax 7
S Dreamweaver pulsanti salva-annulla-ripeti Windows e Software 4
maicol07 Python - Tkinter - Aiuto con pulsanti e tuple Programmazione 0
R [HTML] Pulsanti animati per wordpress WordPress 23
P Movimento telecamera attraverso pulsanti HTML e CSS 2
S pulsanti sonori in html5 HTML e CSS 3
F pulsanti condivisione social su singola foto HTML e CSS 1
C Pulsanti per touch screen HTML e CSS 1
C Touchscreen e pulsanti HTML e CSS 3
otto9due Pulsanti condividi su social dinamici.. PHP 3
A Pulsanti login e registrazione PHP 3
Alessandra Fanelli Menu Collapse- help -nn iserisce azioni a pulsanti Flash 0
ivarello Due Pulsanti con per lanciare funzione Javascript 0
F ancora pulsanti HTML e CSS 1
M Modulo con 2 pulsanti submit PHP 5
C Creare una form con pulsanti di scelta macro Visual Basic 1
M I pulsanti di facebook visualizzano l'immagine errata Joomla 1
M Distinguere l’input di due pulsanti Classic ASP 8
S Pulsanti e Formattazione del testo Javascript 6
P Problema visualizzazione pulsanti dopo scroll jQuery 6
A Problemi con pulsanti social network Javascript 3
D Problemi coi pulsanti PHP 0
A fancyBox script - problema con pulsanti jQuery 2
emanuelevt problema con pulsanti animati jQuery 2
E Visualizzazione Pulsanti PHP 1
T Come far interagire pulsanti e codice php? PHP 1
T 3 pulsanti di ricerca Javascript 0
max_400 Gestire un timer con i pulsanti PHP 5
B modifiche in Dreamweaver per Vecchi pulsanti Flash? Webdesign e Grafica 5
G Listato con effetto scorrevole comandato da pulsanti Javascript 6
C drupal: cambiare grafica pulsanti CMS (Content Management System) 2
P ActionScript: modificare pulsanti Flash 1
V Pulsanti Flash Flash 0
M ruotazione oggetto con pulsanti e/o con mouse Flash 10
A creare layout con pulsanti a schede HTML e CSS 3
P creare una serie di pulsanti con photoshop Photoshop 3
H Gimp, pulsanti e xtns Webdesign e Grafica 0
R Creare pulsanti di scorrimento in flash e altre informazioni Flash 0
L Dove posso trovare pulsanti in flash? Flash 3
F problema Pulsanti flash su IE con target su diversi frame Flash 3
D Problema disabilitazione pulsanti (Actionscript 2.0) Flash 0
D Problema disabilitazione pulsanti (FL 8.0 - AS 2) Flash 0
R pulsanti per aumentare o diminuire velocità di una canzone Flash 7
I Pulsanti E Ie7 Flash 9
S Pulsanti Flash 1

Discussioni simili