[Débutant] RollOver simple
Bonjour,
Comme le précise le titre je m'essaie au JavaScript. Je voudrais créer un rollover qui a ces caractéristiques :
Citation:
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:
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:
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
