Passer un evenement à un objet image

Logiciel & apps Programmation
1

Bonjour à tous,

Voilà, je suis soumis à un problème.
J’ai une page web avec un ensemble de div dans lesquels j’ai des images qui changent lorsque j’appuies sur un bouton.

Pour cela, j’ai créé des objets images que je tire au hasard lorsque le bouton est pressé et j’envoie ensuite ces objets images dans les div.

J’aimerais associer un évènement à un de ces objet, afin de déclencher une action lorsqu’on clique sur l’image.
D’après ce que j’ai trouvé sur internet, voilà comment il faudrait faire :


var tabphrases = new Array(15);

for (var i=0; i< tabphrases.length;i++){tabphrases[i]= new Image();}

tabphrases[0].src="img/ttoto.png";
	tabphrases[0].captureEvents(Event.CLICK);
	tabphrases[0].onclick=bingo();

Mais cela ne marche pas.
“tabphrases” représente un tableau d’images parmi lesquels je vais tirer au hasard.

Pourriez-vous m’aider s’il vous plait ?

Merci de votre aide !!

bisonfou.

2

Ca ne risque pas si tu n’affiche pas tes images, donc aucun moyen de cliquer dessus.

On peut avoir un peu plus, genre le script utilisé pour gérer les images, leur affichage?

3

Merci de ta réponse !
Sisi, je l’affiche !

Voici le code en entier :


<script langage="JavaScript1.2">
var tabphrases = new Array(15);

for (var i=0; i< tabphrases.length;i++){tabphrases[i]= new Image();}

tabphrases[0].src="img/toto.png";
	tabphrases[0].captureEvents(Event.CLICK);
	tabphrases[0].onclick=boum();
tabphrases[1].src="img/toto1.png";
tabphrases[2].src="img/toto2.png";
tabphrases[3].src="img/toto3.png";
tabphrases[4].src="img/toto4.png";
tabphrases[5].src="img/toto5.png";
tabphrases[6].src="img/toto6.png";
tabphrases[7].src="img/toto7.png";
tabphrases[8].src="img/toto8.png";
tabphrases[9].src="img/toto9.png";
tabphrases[10].src="img/toto10.png";
tabphrases[11].src="img/toto11.png";
tabphrases[12].src="img/toto12.png";
tabphrases[13].src="img/toto13.png";
tabphrases[14].src="img/toto14.png";

function tirehasard(tab,range,deja)
{
	while (deja==true)
	{
		deja = false;
		var lenombre = Math.floor(Math.random()*range);
		for (var i=0; i< tab.length;i++)
			{
				if (lenombre == tab[i]){deja=true;}
			}
	}
	return lenombre;
}


function completetab(tab,range)
{
for (var i=0; i< tab.length;i++)
	{
		
		if (tab[i]==-1)
		{
			tab[i]=tirehasard(tab,range,true);
		}
	}
return tab;
}


function boum()
{
	var imagestirees = new Array(5);
	var positionstirees = new Array(5);
	
	for (var i=0; i< imagestirees.length;i++){imagestirees[i]=-1;}
	for (var i=0; i< positionstirees.length;i++){positionstirees[i]= -1;}
	
	imagestirees[0]=0;
	positionstirees[0]=2;
	
	imagestirees = completetab(imagestirees,tabphrases.length);
	
	positionstirees = completetab(positionstirees,5);
	
	
	
	for (var i=0; i< positionstirees.length;i++)
	{
		//alert("En position :"+positionstirees[i]+ "il y aura limage :"+imagestirees[i]+"qui a pour source :"+tabphrases[imagestirees[i]].src);
		document.getElementById("phrase"+positionstirees[i]).src=tabphrases[imagestirees[i]].src;
	}
}

</script>


</head>

<body>
<div class="phrases">
  <div class="images"><img src="img/toto.png" id="phrase0"/></div>
  <div class="images"><img src="img/sep.png" id="sep1"/></div>
  <div class="images"><img src="img/toto1" id="phrase1"/></div>
  <div class="images"><img src="img/sep.png" id="sep2"/></div>
  <div class="images"><img src="img/toto2.png" id="phrase2"/></div>
  <div class="images"><img src="img/sep.png" id="sep3"/></div>
  <div class="images"><img src="img/toto3.png" id="phrase3"/></div>
  <div class="images"><img src="img/sep.png" id="sep4"/></div>
  <div class="images"><img src="img/toto4.png" id="phrase4"/></div>
  <div class="spacer"></div>
</div>

<p class="go" align="center"><img src="img/go.png" onclick="boum()"/></p>

</body>
</html>

Une idée ?

4

En fait, c’est ok, j’ai trouvé comment faire :


document.getElementById("phrase"+positionstirees[0]).onclick=boum;

merci qd meme à tous!

5

le javascript oldschool c’est quand même hyper lourd.

prototype introduit une nouvelle façon de programmer on the client side genre dans ton cas :

prototypejs.org…