cambiare immagine al click senza ricaricare la pagina

[alexdem24]

ciao a tutti

Io mi trovo a dover cambiare un'immagine quando l'utente ci fa click sopra, ma senza ricarica l'intera pagina !

Ossia ho un'immagine come menu dove si trovano 4 voci una a fianco all'altra; Vorrei che l'utente quando preme sulla seconda voce (che come ho detto fa parte di una sola immagine) venga cambiata con quella designata per la voce 2, così come se preme la voce 3 l'immagine cambierà per la voce 3.
Ho già creato 4 immagini ma non so come effettuarlo tramite javascript. Sono venuto a conoscenza che potrebbe esssere possibile tramite la proprietà .src dell'immagine, ma quando ci provo, l'immagine corrente mi scompare e rimane lo spazio vuoto (dovuto a non so cosa..

Qualcuno ha una idea ?

grazie

[Mich_]

Come dire che vuoi fare il rollover dell'immagine.
Le raccolte di script sono piene di script ddatti.

per il "click" devi usare una mappa (tag <map> e <area> )

[alexdem24]

la mappa l'ho già usata per "mappare" l'immagine al passaggio del mouse !
Ad ogni mappatura richiamo una funzione javascript che dovrebbe caricarmi l'immagine giusta. Il codice era questo :

function changeSeason(ep) {
MenuStag2 = new Image; MenuStag2.src = "MenuStag2.gif";
document.changeMenu.src = MenuStag2;
}

ma non funziona

[Mich_]

Non mi pare corretto, ma dovrei vedere il codice HTML della immagine.

La funzione preload (da chiamare ad esempio all'onload della pagina) potrebbe essere:

var immstag = new Array();
function preloadstag() {
  immstag[0] = new Image();        // primavera
  immstag[0].src = MenuStag0.gif;
  immstag[1] = new Image();        // estate
  immstag[1].src = MenuStag1.gif;
  immstag[2] = new Image();        // autunno
  immstag[2].src = MenuStag2.gif;
  immstag[3] = new Image();        // inverno
  immstag[3].src = MenuStag3.gif;
}

la funzione per il cambio:

function changeSeason(ep) {
  document.getElementById('stag').src = immstag[ep].src;
}

dove l'immagine e` definita cosi`:
[img]niente.gif[/img]

[alexdem24]

purtroppo niente da fare Mich_; ho provato ma non vuole funzionare.
Ti provo a spiegare nel dettaglio quello che voglio fare:
Quello in verde è l'immagine che vorrei cambiare al click del mouse
(è un'immagine unica) e subito di seguito c'è il contenuto di ogni menu. Il contenuto non ' nient'altro che un iframe contenente la pagina html corrispondente alla stagione che l'utente indica sopra.
Quindi all'evento onClick ci evono essere 2 azioni; il cambio dell'immagine da 1°Stagione a 2°Stagione fino alla 4° e il caricamento della pagina html all'interno dell'iframe.
p.s.
So che se facessi un semplice link e ricaricassi la pagina sarebbe tutto più semplice, ma vorrei riuscire a farlo in questo modo sia per praticità, sia per evitare agli utenti di ricaricare l'intera pagina, quando soltanto l'iframe cambia.
Ecco l'immagine:


Come vedi, devo associare ad ogni parte dell'immagine una mappa per permettere all'utente di cambiare stagione.
Le mappe le avevo settate così:

<map name="changeMenu">
  <area shape="rect" coords="18,3,87,19" href="javascript:void();" onClick="changeSeason(1)">
  <area shape="rect" coords="114,4,183,19" href="javascript:void();" onClick="changeSeason(2)">
  <area shape="rect" coords="211,4,277,19" href="javascript:void();" onClick="changeSeason(3)">
  <area shape="rect" coords="310,4,376,18" href="javascript:void();" onClick="changeSeason(4)">
</map>

dove nell'immagine avevo 'usemap="#changeMenu"'.
Ma non funziona...

[Mich_]

Intanto riscrivo un tag area:
<area shape="rect" coords="18,3,87,19" href="#" onClick="changeSeason(0);this.blur();return false;">

il this blur() serve per il browser IE, ma nonda` fastidio agli altri.

Nota che le stagioni devono andare da 0 a 3 (per essere compatibile con il vettore.

Se vuoi anche far andare ad un link, puoi farlo, ma la funzione va modificata. E occorre aggiungere un vettore di link:

var indirizzi = new Array();
indirizzi[0] = "primavera.htm";
indirizzi[1] = "estate.htm";
indirizzi[2] = "autunno.htm";
indirizzi[3] = "inverno.htm";

var immstag = new Array();
function preloadstag() {
  immstag[0] = new Image();        // primavera
  immstag[0].src = MenuStag0.gif;
  immstag[1] = new Image();        // estate
  immstag[1].src = MenuStag1.gif;
  immstag[2] = new Image();        // autunno
  immstag[2].src = MenuStag2.gif;
  immstag[3] = new Image();        // inverno
  immstag[3].src = MenuStag3.gif;
}

function changeSeason(ep) {
  document.getElementById('stag').src = immstag[ep].src;
  document.getElementById('ID_IFRAME').location.href = indirizzi[ep];
}

[alexdem24]

Ciao Mich_ Ti ringrazio molto per la pazienza che mi stai mostrando, ma purtroppo il tutto non riesco a farlo funzionare !!
Ti posto di seguito il codice e le posizioni che ricoprono.

Quello che ti scrivo di seguito e lo script che ho posizionato prima della chiusura del tag </head>.

<script language="JavaScript">
	var indirizzi = new Array();
	indirizzi[0] = "musicStag1.htm";
	indirizzi[1] = "musicSta2.htm";	
	indirizzi[2] = "autunno.htm";
	indirizzi[3] = "inverno.htm";
	var immstag = new Array();
	
	function preloadstag() {
		MenuSeason[0] = new Image();        // primavera
		MenuSeason[0].src = MenuStag1.gif;
		MenuSeason[1] = new Image();        // estate
		MenuSeason[1].src = MenuStag2.gif;
		MenuSeason[2] = new Image();        // autunno
		MenuSeason[2].src = MenuStag3.gif;
		MenuSeason[3] = new Image();        // inverno
		MenuSeason[3].src = MenuStag4.gif;
	}

	function changeSeason(ep) {
		document.getElementById('MenuSeason').src = MenuSeason[ep].src;
		document.getElementById('MusicFrame').location.href = indirizzi[ep];
	}	
</script>

Questo invece è l'html usato per l'immagine:

[img]../images/MenuStag1.gif[/img]

...dove usemap è il tag che mi seleziona le mappe.

Più avanti ho l'iframe :

<iframe src="musicStag1.htm" width="420" height="400"  frameborder="0" id="MusicFrame"> 
  Contenuto alternativo per i browser che non leggono gli iframe.

</iframe>

Prima della fine del tag </body> ci sono le mappe come mostrato di seguito:

<map name="changeMenu">
  <area shape="rect" coords="18,3,87,19" href="#" onClick="changeSeason(0);this.blur();return false;"> 
  <area shape="rect" coords="114,4,183,19" href="#" onClick="changeSeason(1);this.blur();return false;">
  <area shape="rect" coords="211,4,277,19" href="#" onClick="changeSeason(2);this.blur();return false;">
  <area shape="rect" coords="310,4,376,18" href="#" onClick="changeSeason(3);this.blur();return false;">
</map>

Voglio dire... tutto sembra essere corretto.. Pensavo che magari potesse essere il problema della cache, ma non lo è xchè ricarico la pagina con la cache vuota.

Tu riesci a vedere cosa non funziona ?

[Mich_]

Se sostituisci una variabile, devi sostituirla dappertutto!!!
E non puoi usare lo stesso nome per due oggetti diversi!!

var indirizzi = new Array();
  indirizzi[0] = "musicStag1.htm";
  indirizzi[1] = "musicSta2.htm";	
  indirizzi[2] = "autunno.htm";
  indirizzi[3] = "inverno.htm";
  var MenuSeason = new Array();
	
function preloadstag() {
  MenuSeason[0] = new Image();        // primavera
  MenuSeason[0].src = "../images/MenuStag1.gif";
  MenuSeason[1] = new Image();        // estate
  MenuSeason[1].src = "../images/MenuStag2.gif";
  MenuSeason[2] = new Image();        // autunno
  MenuSeason[2].src = "../images/MenuStag3.gif";
  MenuSeason[3] = new Image();        // inverno
  MenuSeason[3].src = "../images/MenuStag4.gif";
}

function changeSeason(ep) {
  document.getElementById('MenuSeason1').src = MenuSeason[ep].src;
  document.getElementById('MusicFrame').location.href = indirizzi[ep];
}	
...
[img]../images/MenuStag1.gif[/img]

[alexdem24]

lo script non funziona ancora ma volevo farti una domanda;
Ho notato che acusato dei problemi nella seconda funzione ed ho notato che non avevi dichiarato l'array come avevi fatto per il primo...
Tolto questo, ho notato anche che cerchi di usare i dati dell'array della prima funzione all'interno della seconda...
Ho provato a fare degli alert, ma sembra che non riesca a rilevare i dati del prio array.

function changeSeason(ep) {
  alert(document.getElementById('MenuSeason1').src);
  document.getElementById('MenuSeason1').src = MenuSeason[ep].src;
  document.getElementById('MusicFrame').location.href = indirizzi[ep];
}

Con quell'alert mi stampa come logico sempre un elemento, ossia l'immagine originale, ma ad esempio se provo anche solo a spostare l'alert una riga sotto, non mi viene eseguito il popup, come se non riuscisse a leggere dall'array.

Domanda:
é possibile usare i dati immessi in una funzione e manipolarli con un'altra come hai suggerito tu ?

grazie

[Mich_]

Certo che e` possibile. La prima funzione deve pero` venir chiamata prima. I dati sono globali, in quanto la matrice viene definita fuori dalle funzioni.

La prima funzione viene chiamata dall'onload della pagina.
Devi pero` dare il tempo di caricare le immagini, altrimenti da` errore.
In funzione del peso delle immagini e della velocita` della linea, il tempo di caricamento puo` essere anche piuttosto lungo (parecchi secondi o forse un paio di minuti).

Quell'alert non ti puo` dare un risultato usabile, in quanto un oggetto .src non e` convertibile in stringa.

Prova a mettere invece un alert alla fine della prima funzione, per verficare quando finisce.