Implémentation de onMouseOver / onMouseout

Version imprimable

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:

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:

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

ainsi que la fonction

Code:

nonSurvoler().

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

Merci d'avance

25/05/2012, 19h06
Darkyl
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:

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

soit

Code:

<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:

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

Tu peux faire comme ca aussi :
Code:

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:

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....8O
25/05/2012, 19h12
Willpower

l'objet "Document" n'existe pas, javascript est sensible à la case.
25/05/2012, 19h17
Darkyl

je l'avais pas vu celle là lol.:aie:
25/05/2012, 19h19
Willpower

Citation:

Envoyé par Darkyl

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

Code:

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:

<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.

Merci.

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 :mrgreen: je vous donne mon code final (qui marche). Et encore merci à tous.
Code:

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>

25/05/2012, 19h59
NoSmoking
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:

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:

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.
25/05/2012, 20h02
NoSmoking

Citation:

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.
25/05/2012, 20h42
Willpower

Citation:

Envoyé par NoSmoking

concernant l'espace il peut tout à fait exister et n'engendra pas de problème

oups( je sais pas pourquoi j'étais persuadé du contraire) :oops:
27/05/2012, 09h53
Bovino

Citation:

Envoyé par Willpower

oups( je sais pas pourquoi j'étais persuadé du contraire) :oops:

Peut-être parce que ça pique quand même un peu les yeux ! ;)