Bonjour à tous,

Alors pour essayer d'être clair:
-j'ai une page avec x bloc en invisible,
-chaque bloc est identique car créé avec une boucle php, seul le contenu varie,
-dans chaque bloc, j'ai une image qui à de base un src="",
-j'ai un menu qui avec un script js rend le bloc voulu visible.

Je cherche à faire en sorte que au même clic, le src="" de l'image se remplisse.

J'ai fait comme ça:

Voilà un exemple de ligne de mon menu pour l'appel de fonction

<li class="niveau2"><a href="#" onclick="infoJeux(\''.$nomAAfficher.'\');">'.$nomAAfficher.'</a></li>

mon code js fonctionnel sans le remplissage de l'image:

function infoJeux(jeux) {
				var tabDiv=document.getElementById('content').getElementsByTagName('div');
				for(var i=0;i<tabDiv.length;i++){
					if(tabDiv[i].id==jeux){
						tabDiv[i].style.display='block';
					}else{
						tabDiv[i].style.display='none';
					}
				}
			}

J'ai tenté une modif comme celle là:

function infoJeux(jeux) {
				var tabDiv=document.getElementById('content').getElementsByTagName('div');
				for(var i=0;i<tabDiv.length;i++){
					if(tabDiv[i].id==jeux){
						tabDiv[i].style.display='block';
						window.document.getElementById('image_jeu').src='http://www.centre-social-monein.fr/jeux/'+jeux+'_image.jpg';
					}else{
						tabDiv[i].style.display='none';
					}
				}
			}

Mais rien, et apparemment pas d'erreur dans le code d'après la console de firefox!
Si je demande à voir le code produit avec un alert(), j'ai bel et bien mon adresse de l'image!

Où ai-je raté?
Merci d'avance

Montre le code HTML de tes blocs invisibles ?

Voilà le code php de la boucle:

<div id="content">
	<?php
	while ($donnees = mysql_fetch_array($jeux)) {
		$nom = $donnees['nom'];
		$nomAAfficher = $donnees['nomAAfficher'];
		$description = stripslashes($donnees['description']);
		echo '<div class="infoJeux" id="'.$nomAAfficher.'">
				<h2>Déscription du jeu '.$nomAAfficher.'</h2>
				<img id="image_jeu" src="" width="250" alt="Image du jeu '.$nomAAfficher.'" /><br />
				<p>'.$description.'</p>
				<a href="#" onclick="chargerJeux(\''.$nom.'\', \''.$nomAAfficher.'\', \'on\'); return false">
					<img src="play.png" alt="Lancer le jeu '.$nomAAfficher.'" title="Cliquez pour lancer le jeu '.$nomAAfficher.'" style="border:none;" />
				</a><br />
				<cite>Ce jeux à été joué '.$donnees['comptage'].' fois.</cite>
			</div>';
	}
	?>
</div>

ce qui nous donne des codes html comme ça sur le pc client:

<h2>Déscription du jeu Dirt bike</h2>
<img id="image_jeu" src="" alt="Image du jeu Dirt bike" width="250"><br>
<p>Dirt[...] le texte de la description blablabla [...]sonnel.</p>

<a href="#" onclick="chargerJeux('http://centre-social-monein.fr/jeux/dirt_bike.swf', 'Dirt bike', 'on'); return false">
<img src="play.png" alt="Lancer le jeu Dirt bike" title="Cliquez pour lancer le jeu Dirt bike" style="border: none;">
</a><br>

<cite>Ce jeux à été joué 0 fois.</cite>

EDIT: Je viens de penser à une méthode plus simple qui fonctionne, problème résolu, espérons que ce post inutile pourra servir à un autre...

Ma solution:
au lieu de reperer l'image avec un nom commun (ce qui n'est pas valable en plus pour coder proprement), je l'appelle "image_NOM VARIABLE" où variable est le nom du jeu, chose qui est faite automatiquement dans ma boucle et qui me permet de faire un appel js plus simple:

window.document.getElementById('image_ON RETROUVE ICI LE NOM VARIABLE').src='/jeux/'+jeux+'_image.jpg';

En effet, dans une page, un ID doit toujours être unique...

Sinon getElementById() ne remplirait nullement son rôle.