[Débutant] RollOver simple

Invité · 23/02/2007, 15h30

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

**Djakisback** · 23/02/2007, 16h08

Salut,
en faisant ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

imgObj.onmouseover = rollOver(imgObj);

t'appelles directement rollOver() et tu copies le retour de la fonction dans imgObj.onmouseover donc ca affiche la source.

Il ne me semble pas qu'il y ait un moyen de faire ca sans test du navigateur, s'il y en a un ca m'intéresse aussi. FF implémente pas window.event du DOM 1 alors que IE si mais il implémente pas Event du DOM 2, perso je ferais ca :

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
function roll(imgObj) {
	imgObj.onmouseover = rollOver;
	imgObj.onmouseout = rollOut;
}
 
function rollOver(evt) {
	try	{
		// Gecko
		document.getElementById("res").innerHTML = evt.currentTarget.src;
	}
	catch(e)	{
		// IE
		document.getElementById("res").innerHTML = window.event.srcElement.src;
		// ou
		document.getElementById("res").innerHTML = this.src;
 
	}
}

A ma connaissance y a pas moyen de passer récupérer l'objet déclencheur sans passer par window.event...
Bye

[edit]
Bon bin finalement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function rollOver() {
	document.getElementById("res").innerHTML = this.src;
	}

tourne sous IE et FF, je sais pas ce qu'il en est sous les autre navigateur.
J'ai confondu, c'est pas pour récupérer le déclencheur que c'est galère, mais l'événement en lui-même.
[/edit]

[REDIT]
Tu peux pas utiliser this sous Opera.
[/]

**Auteur** · 23/02/2007, 18h05

bonjour,

il n'est pas nécesaire de rechercher l'élément déclencheur : donne à mouseOver l'objet qui déclenche l'événement onmousover.

Code html :

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
22
23
24
25
26
27
28
29
30
31
 
<html>
<head>
<title> 05 Images survol nom </title>
 
<script type="text/javascript">
<!--
function mouseOver(obj)
{
  document.getElementById("res").innerHTML = obj.src;
}
 
function mouseOut()
{
  document.getElementById("res").innerHTML = "";
}
 
//-->
</script>
 
 
</head>
<body>
 
<a href='1.html'><img src='abcd.png' onmouseover="mouseOver(this)" onmouseout="mouseOut()" alt='banner1' id='img1' /></a>
<a href='2.html'><img src='xyz.png' onmouseover="mouseOver(this)" onmouseout="mouseOut()"  alt='banner2' id='img2' /></a>
 
<h3 id='res'></h3>
 
</body>
</html>

Invité · 23/02/2007, 20h32

Ok merci pour vos réponses!

Je vais plutôt me satisfaire de la réponse d'Auteur pour l'instant car plus compréhensible vu mon niveau zéro en JavaScript.

Bonne soirée!

webrider

[Débutant] RollOver simple

JavaScript

Discussions similaires

Partager

Partager