variabili php e javascript

Ciao a tutti.
Ho il seguente problema: mel mio sito ho inserito una piccola sala giochi. Nella pagina principale c'è una tabella che elenca i giochi disponibili con un'immagine in una colonna e una breve descrizione nell'altra. Poiché l'utiilzzo dei giochi è riservato agli utenti registrati, l'immagine del gioco è racchiusa in un tag href creato con php nel seguente modo

	<td>
	     <? 
		if (isset($_SESSION['id'])) {
			$link = "<a class='blue'  href='javascript:Popup(\"paginagiocoswf\");'>";
		} else {
			$link = "<a href='javascript:alert(\"$msg\");'>";
							}
		echo $link; ?><img src="immaginegioco.jpg" width="60" height="54" alt="immaginegioco" </a>
	</td>

Ora, vorrei inserire il codice per far sì che al passaggio del mouse sull'immagine si aprisse un'anteprima del gioco. Questo si può ottenere in questo modo: innanzitutto si creano un paio di div con display:none:

	<div id="banner" style="display:none;">
		<img src="immaginegioco.gif" border="0" alt="Anteprima" />
	</div>
	<div id="chiudi" align="right" style="display:none;">
		<a href="#" onclick="javascript:chiudi('banner');chiudi('chiudi')"><strong>X</strong></a>
       </div>

L'aspetto dei div è regolato da un css esterno che non starò qui a proporre in quanto ininfluente.

Il primo spezzone di codice va modificato così

echo $link; ?><img src="immaginegioco.jpg" width="60" height="54" alt="immaginegioco" onmouseover="javascript:apri('banner');apri('chiudi')" /></a>

Gli script apri e chiudi sono i seguenti:

	<script type="text/javascript">
		function apri( targetId ){
			if (document.getElementById){
				target = document.getElementById( targetId );
					if (target.style.display == "none"){
						target.style.display = "block";
					} 
				}
			}
		function chiudi( targetId ){
			if (document.getElementById){
				target = document.getElementById( targetId );
					if (target.style.display == "block"){
						target.style.display = "none";
					} 
				}
			}
	</script>

Da notare che l'immagine così caricata non è la stessa contenuta nella tabella, ma una seconda catturata dalla schermata del gioco.

L'intoppo sta nel fatto che nel div banner l'immagine da visualizzare andrebbe definita dinamicamente, cioè a seconda del'icona del gioco su cui si trova il mouse, dovrebbe cioè essere passata come variabile all'interno dell'evento onmouseover, mentre nel div 'banner' il tag img dovrebbe essere <img src="">. Ho fatto vari tentativi, ma sono falliti.
Qualcunoi sa come si può fare?

Grazie mille in anticipo per ogni idea o suggerimento. Ciao

[saitfainder]

Direi che basta dare un ID a questo tag:

<img src="immaginegioco.gif" border="0" alt="Anteprima" />

e poi modificarne l'attributo SRC al momento della chiamata ad apri().

Questo per sommi capi, però mi sembra che te la sai cavare, no?

Grazie intanto per il suggerimento, saitfainder, e grazie per il complimento: faccio quello che posso... Che a volte però non è molto, o comunque non è abbastanza. Infatti, non ho proprio capito cosa intendi dire. Va bene per l'assegnamento di un ID al tag img, ma come si fa a modificare l'attributo src durante la chiamata ad apri() nell'evento onmouseover? Adesso comunque ci penserò sopra, ma se puoi entrare un po' più nel dettaglio, sarebbe veramente gentile... Ciao

PS: sto dando un'occhiata al tuo sito (l'intro è veramente graziosa!) e ti segnalo un erroruccio di digitazione: nel box Tool Fan Site scrivi

"che attraverso la loro esistenza permettono a noi, comuni mortali, si sapere di esistere." si sapere...

'notte.

[saitfainder]

Grazie per la segnalazione, ho subito corretto la frase :-D

Tornando al tuo problema, come dicevo, assegni un ID all'immagine:

<img src="immaginegioco.gif" border="0" alt="Anteprima" id="anteprima" />

In questo modo sarà facile modificarla via javascript.

Quindi aggiungi una chiamata all'evento onmouseover:

echo $link; ?><img src="immaginegioco.jpg" width="60" height="54" alt="immaginegioco" onmouseover="javascript:apri('banner');apri('chiudi');cambia('immaginegioco2.jpg')" /></a>

Specificando come parametro l'indirizzo dell'immagine da visualizzare. Questa valore va ovviamente generato dal PHP.

Infine la funzione Javascript che cambia l'immagine visualizzata:

function cambia(indirizzo) {
   document.getElementById('anteprima').src = indirizzo;
}

Tutto chiaro? ;-)

Grazie mille saitfainder: spiegazione ineccepibile. Purtroppo non posso metterla subito in pratica, perché ieri abbiamo avuta una tromba d'aria e ho un po' di casino da sistemare. Ma appena posso, la implemento (anche perché la soluzione cui ho per ora fatto ricorso (creare tanti div quanti sono i giochi in elenco, assegnando loro tag e attributi staticamente) è sinceramente un trucchetto che non mi piace.

Ciao e grazie ancora ;-)

EDIT:
Ok, aggiornato il codice e funziona alla perfezione. Grazie mille ancora