Bonjour,

Comme le précise le titre je m'essaie au JavaScript. Je voudrais créer un rollover qui a ces caractéristiques :
2 images
lors du passage sur l'une ou l'autre leur source s'affiche en-dessous
Je m'y suis essayé mais le comportement n'est pas du tout celui attendu!

Lors du chargement de la page, la source de la deuxième image est déjà affichée. Lorsque je passe dessus elle s'en va puis que je sois dessus ou pas il n'y a plus de réaction, aucune source ne s'affiche.

Voici mon code :

HTML
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title> 05 Images survol nom </title>
<script language="JavaScript" type="text/JavaScript" src="05.js" />
</head>
<body>
<a href='1.html'><img src='abcd.png' alt='banner1' id='img1' /></a>
<a href='2.html'><img src='xyz.png' alt='banner2' id='img2' /></a>
<h3 id='res'></h3>
</body>
</html>
05.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = initRoll;
 
function initRoll() {
	for (var i=0 ; i<document.images.length ; i++) {
		var imgObj = document.images[i];
		roll(imgObj);
	}
}
 
function roll(imgObj) {
	imgObj.onmouseover = rollOver(imgObj);
	imgObj.onmouseout = rollOut;
}
 
function rollOver(imgObj) {
	document.getElementById("res").innerHTML = imgObj.src;
}
 
function rollOut() {
	document.getElementById("res").innerHTML = "";
}
Je ne parviens pas à trouver l'erreur, peut-être pourrez-vous m'en apprendre davantage.

Merci!

webrider