faire apparaître une image au survol d'un texte

Version imprimable

Bonsoir,

pour faire ce qui est dans le titre, j'ai fait ce code, mais il ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
  <style>
function aff_img(_img) {
document.getElementById("+_img+").style.display="block";
}
function restore_vide(_img) {
document.getElementById("+_img+").style.display="none";
}
  </style>
</head>
<body>
<a href="#" onmouseover="aff_img('---')"
 onmouseout="restore_vide('---')">texte</a>
<img id="---" src="---.png"
 style="display: none;"/>
</body>

Pourquoi ?

02/11/2012, 08h23
Bovino

Probablement parce que tu écris n'importe quoi... :cry:

Code:

<img id="---" src="---.png" style="display: none;"/>

id="---", vraiment...

Code:

document.getElementById("+_img+").style.display="block";

il est où l'élément dont l'id est +_img+ ? :no:

Reste ensuite à te renseigner sur les valeurs possibles d'un id, ce qui est le B.A.BA du métier de Webmaster...

Vu que c'est n'importe quoi, j'ai un peu modifié le code en tenant compte de tes remarques et en me rapprochant d'un truc qui marche :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test</title> <style> function aff_img(img_) { document.getElementsByClassName("+img_+").style.display="block"; } function restore_vide(img_) { document.getElementsByClassName("+img_+").style.display="none"; } </style> </head> <body> <a href="#" onmouseover="aff_img(xxx)" onmouseout="restore_vide(xxx)">texte</a> <img src="xxx.png" class="xxx" style="display: none;"> </body>
mais ça marche toujours pas et je vais répondre à tes questions :

Citation:

il est où l'élément dont l'id est +_img+

maintenant une classe, et en fait une classe utilisée par l'image : class="xxx" et dont je passe le nom en paramètre de la fonction : onmouseover="aff_img(xxx)"

Citation:

.

(et j'ai modifié ma signature pour me rapprocher de la vérité ;))

02/11/2012, 10h53
SpaceFrog

tu as des elements portant le nom de classe class="+img_+"???????????????
02/11/2012, 10h59
Bovino

Et tu ne connais pas la différence entre un élément HTML et une collection...
02/11/2012, 11h06
SpaceFrog
ni entre une variable et un string ...

Teste les codes ci dessous qui te permettront j'espère de comprendre ton erreur
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function foo ( truc ){ alert("truc") } function bar ( truc ){ alert(truc) } foo('machin') bar('machin')

Citation:

Teste les codes ci dessous qui te permettront j'espère de comprendre ton erreur

Même pas besoin, j'ai compris :
Code:

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 <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test</title> <script type="text/javascript"> //----------------------- function see_bubble(img_){ var Obj = document.getElementById(img_); Obj.style.display = "block"; } //-------------------- function kill_bubble(img_){ var Obj = document.getElementById(img_); Obj.style.display = "none"; } </script> </head> <body> <a href="xxx.png" onmouseover="see_bubble('xxx');" onmouseout="kill_bubble('xxx')">texte</a><br> <img src="xxx.png" id="xxx" style="display: none;"><br> </body>
Les noms ont changé car je suis parti d'un autre fichier...

@ bovino : tu peux préciser "différence entre un élément HTML et une collection... " ?

02/11/2012, 12h47
SpaceFrog

getElemetnById retourn un element unique
getElementsByName retourne une collection d'élements
02/11/2012, 13h44
Bovino

Et les propriétés et méthodes que tu peux utiliser sur un élément (comme style) ne sont pas les mêmes que sur une collection.
02/11/2012, 14h16
Bovino
Citation:

Envoyé par laurentSc

et j'ai modifié ma signature pour me rapprocher de la vérité ;)

Sincèrement, le problème n'est pas là...
Quand on regarde tes messages postés dans les différents forums : HTML, CSS, JavaScript ou PHP (pour n'en citer qu'un récent : http://www.developpez.net/forums/d12...e/#post6954759) on se rend compte que tu n'as manifestement jamais lu la moindre documentation (livre, formation voire tutoriels) concernant les domaines sur lesquels tu interviens alors que c'est la première des choses à faire. Ensuite, une fois que cela est fait et que tu as assimilé les bases, reste à te trouver des documentations de référence à consulter régulièrement !
Parmi celles-ci :
02/11/2012, 14h21
laurentSc

Merci de vos réponses.