Implémentation de onMouseOver / onMouseout

**Houdette** · 25/05/2012, 18h14

Bonjour,
Je me permets de vous demander de l'aide concernant un petit programme en JavaScript que j'ai réalisé.
Il s'agit d'un exercice en classe, le professeur demande à ce qu'on utilise une fonction (qui change l'image grâce à OnMouseOver) au niveau du javascript et de la rappeler par la suite dans le corps html, comme suit:

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
 
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
 
function Survoler(){Document.images[0].src = 'image_2.png'}
 
function nonSurvoler(){Document.images[0].src= 'image_1.png';}
 
</SCRIPT>
</HEAD>
 
<BODY> <form name="images">
    <a href = "mailto://nom.prenom@gmail.com"><img src="image_1.png" name="image" onMouseOver = "Survoler()"; onMouseOut = "nonSurvoler()";> </a>
 
</form>    
</BODY>
</HTML>

Le problème c'est qu'au niveau du navigateur il n'affiche que la première image, lorsque je survole avec ma souris, firebug (sous mozilla) affiche une erreur au niveau du :

Code :

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

function Survoler(){Document.images[0].src = 'image_2.png'}

ainsi que la fonction

Code :

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

nonSurvoler().

Je suis coincée j'espère que quelqu'un pourra m'aider.

Merci d'avance

**Darkyl** · 25/05/2012, 19h06

Bonjour,

Je pense que l'erreur vient des ';' aprés le onmouseover et le onmouseout.
Soit tu met pas du tout de ";", soit tu les met dans les "".

donc

Code :

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

<img src="image_1.png" name="image" onMouseOver="Survoler();" onMouseOut="nonSurvoler();">

soit

Code :

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

<img src="image_1.png" name="image" onMouseOver="Survoler()" onMouseOut="nonSurvoler()">

Puis tu as aussi une erreur de ';' que tu as oublié dans ta fonction Survoler().
ce qu'il faut :

Code :

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

function Survoler(){Document.images[0].src = 'image_2.png'; }

Tu peux faire comme ca aussi :

Code :

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

1
2
3
4
5
 
function change_image()
{
document.getElementById('image').src="image_2.png";
}

aprés avoir déclaré ton image comme suit:

Code :

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

1
2
 
<img id="image" name="image" src="image_1.png" onMouseOver = "Survoler()" onMouseOut = "nonSurvoler()">

toujours déclarer un ID (et un name c'est mieux pour IE), à un objet.
TOUJOURS == ID

Bizard que ton prof n'ai pas insisté sur les ID....

**Willpower** · 25/05/2012, 19h12

l'objet "Document" n'existe pas, javascript est sensible à la case.

**Darkyl** · 25/05/2012, 19h17

je l'avais pas vu celle là lol.

**Willpower** · 25/05/2012, 19h19

Envoyé par Darkyl

Puis tu as aussi une erreur de ';' que tu as oublié dans ta fonction Survoler().
ce qu'il faut :

Code :

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

function Survoler(){Document.images[0].src = 'image_2.png'; }

Non, en javascript, le saut de ligne ou la fermeture d'un bloc (le cas ici) correspond à une fin d'instructions et dans ce cas le point virgule n'est pas obligatoire.

Note: mais il est recommandé de le mettre dans les 2 cas; dans le cas d'un saut de ligne, si un jour ton fichier est retranscris par exemple par un minimiser de code qui supprime les sauts. (c'est la ***** pour retrouver où il manque un ";") Et en fin de bloc par habitude, si après tu rajoutes une instructions sans remarquer qu'il manque un ";" à la précédente, tu vas te prendre la tête pour rien.

Enfin ce qui me choque dans :

Code html :

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

<a href = "mailto://nom.prenom@gmail.com"><img src="image_1.png" name="image" onMouseOver = "Survoler()"; onMouseOut = "nonSurvoler()";> </a>

avant même le ";" en dehors des guillemets, c'est l'ESPACE entre l'attribut et sa valeur. l'espace servant à délimiter les attributs pour le navigateur, ton code risque fort d'être considéré comme un nouveau nom d'attribut pour le moins étrange.

**Houdette** · 25/05/2012, 19h58

Merci infiniment à tous pour la précieuse aide, effectivement les points-virgules étaient mal placés, JS ne reconnait pas Document mais document, l'espace entre les attributs et les valeurs est à bannir et pour finir la balise form est à bannir aussi .

Bref, pour les prochains débutants comme moi

je vous donne mon code final (qui marche). Et encore merci à tous.

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
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
 
function Survoler(){document.images[0].src = 'image_2.png'}
 
function nonSurvoler(){document.images[0].src= 'image_1.png';}
 
</SCRIPT>
</HEAD>
 
<BODY> 
    <a href="mailto://nom.prenom@gmail.com"><img src="image_1.png" name="image" onMouseOver="Survoler();"onMouseOut="nonSurvoler();"> </a>
 
 
</BODY>
</HTML>

**NoSmoking** · 25/05/2012, 19h59

Bonjour,
on pourra également signaler que <SCRIPT language="JavaScript"> est obsoléte, que l'on doit utiliser <script type="text/javascript"> ou simplement <script> en HTML5.

Il est à noter également qu'il est fortement déconseiller d'utiliser les mots se rattachant au DOM, ici images, pour le name de la FORM.
Il y a fort à parier que document.images, dans le contexte ci dessus pointe sur la FORM et non sur la collection images, il n'est qu'à mettre un alert( document.images.tagName); en entrée de fonction pour s'en rendre compte.

Enfin dans ton cas tu peux passer en paramètre l'objet à l'origine de l'événement via le mot clé this.

Code :

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

1
2
3
<a href = "mailto://nom.prenom@gmail.com">
  <img src="image_1.png" name="image" onmouseover = "Survoler( this)"; onmouseout = "nonSurvoler( this)";>
</a>

et dans ta fonction faire

Code :

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

1
2
3
4
5
6
function Survoler( obj){
  obj.src = 'image_2.png';
}
function nonSurvoler( obj){
  obj.src= 'image_1.png';
...}

mais ce n'est peut être pas encore au cours.

**NoSmoking** · 25/05/2012, 20h02

l'espace entre les attributs et les valeurs est à bannir et pour finir la balise form est à bannir aussi .

concernant l'espace il peut tout à fait exister et n'engendra pas de problème, quant à bannir la balise FORM pas si tu as besoin de créer un formulaire.