pourquoi l'image ne disparaît pas sur onmouseout ?

Version imprimable

Bonsoir,

je n'arrive pas à faire marcher ce code :

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
<head>
...
  <script type="text/javascript">
//-----------------------
function see_bubble(img_){
var Obj = document.getElementById('infobulle');
Obj.innerHTML = "<img src='" +img_ +"' alt='" +img_ +"' width=100>";
Obj.style.display = "block";
}
//--------------------
function kill_bubble(){
var Obj = document.getElementById('infobulle');
Obj.innerHTML = "";
Obj.style.display = "none";
}
  </script>
</head>
<body>
<div id="infobulle">
<a href="---.jpg"
 onmouseover="see_bubble("---.jpg');"
 onmouseout="kill_bubble()" onclick="kill_bubble()">texte</a><br>
</div>
</body>

Pourquoi ?

31/10/2012, 07h51
Bovino

Code:

onmouseover="see_bubble("---.jpg');"

Il n'y a rien qui te perturbe là-dedans ?

Ensuite, vu que tu remplaces le contenu de la div au survol du lien, tu supprimes donc celui-ci, je vois alors mal quand pourrait avoir lieu de mouseout :roll:
31/10/2012, 09h45
laurentSc

Citation:

Il n'y a rien qui te perturbe là-dedans ?

En effet, l'erreur de copier-coller !

Citation:

Ensuite, vu que tu remplaces le contenu de la div au survol du lien, tu supprimes donc celui-ci, je vois alors mal quand pourrait avoir lieu de onmouseout

Là, je suis entièrement d'accord, mais du coup, vois-tu un moyen pour supprimer l'image ?
31/10/2012, 10h15
andry.aime

Bonjour,

Tu te compliques la vie, bascule seulement l'attribut style.display de l'image en none et block lors de la survole du lien au lieu de supprimer et de créer à nouveau l'image.

A+.
31/10/2012, 14h03
Auteur

salut,

fait une recherche avec le mot-clef "roll-over", tu auras un bon début ;)

Bonsoir, je reviens car ce n'est pas au point. D'abord, merci Andry.aime de me proposer une simplification ; mais j'ai tenté de l'appliquer :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <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('this_img'); Obj.style.display = "block"; } //-------------------- function kill_bubble(){ var Obj = document.getElementById('this_img'); Obj.style.display = "none"; } </script> </head> <body> <img src="---.jpg" id="this_img" display="none" width="100"><br> <a href="---" onmouseover="see_bubble("---.jpg');" onmouseout="kill_bubble()" onclick="kill_bubble()">texte</a><br>
et ça ne va pas :
1) au départ, l'image n'est pas en none mais en block .
2) Quand je survole le texte, l'image se met au-dessus et le texte descend, alors que je voudrais que celui-ci ne bouge pas et maîtriser la position de l'apparition de l'image.

@ Auteur : soit je n'ai pas compris, soit les exemples de rollover ne répondent pas à mon besoin.

01/11/2012, 03h41
andry.aime

Bonjour, dans ce cas n'utilise pas display mais style.visibility = 'visible' et style.visibility = 'hidden';

A+.

Bonjour,

Citation:

1) au départ, l'image n'est pas en none mais en block .

un peu normal compte tenu de la déclaration non conforme de

Citation:

<img src="---.jpg" id="this_img" display="none" width="100">

As tu tenu compte de la remarque de Bovino concernant onmouseover="see_bubble("---.jpg');"?

Citation:

2) Quand je survole le texte, l'image se met au-dessus et le texte descend

inverses l'ordre dans le HTML :D, ou utilises la méthode donnée par andry.aime.

On notera que tu peux réaliser cela en pure CSS
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 26 27 28 29 30 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>test</title> <style> a{ position:relative; } a img{ position:absolute; display:none; border:0; left:0; top:1em; } a:hover img{ display:block; } </style> </head> <body> <p> <a href="#">andry.aime <img src="http://www.developpez.net/forums/avatars/191308-andry-aime.gif?dateline=1349181580" alt="avatar andry.aime"><br> </a> </p> <p>Omnes hoc potest fieri in puram CSS, iustus movere muris super link to videre avatar "andry.aime".</p> </body> </html>
...tiens tiens! cela ressemble à du rollover!

Merci NoSmoking car grâce à toi, j'ai la solution :
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 <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('this_img'); Obj.style.display = "block"; } //-------------------- function kill_bubble(){ var Obj = document.getElementById('this_img'); Obj.style.display = "none"; } </script> </head> <body> <a href="---.jpg" onmouseover="see_bubble('---.jpg');" onmouseout="kill_bubble()">texte</a><br> <img src="---.jpg" id="this_img" style="margin-left:50px;display: none;" width="100"><br> </body>
Pour la déclaration non conforme d'un style CSS, je n'avais pas fait attention qu'il s'agissait de cela.
Même si tu proposes une solution de rollover, je souhaitais corriger mon script ; par contre une question sur ta solution : pourquoi le a en position relative et le a img en position absolute ?

02/11/2012, 14h33
NoSmoking

Citation:

...par contre une question sur ta solution : pourquoi le a en position relative et le a img en position absolute ?

:!: Tout élément en position:absolute est placé par rapport au premier de ses parents positionnés, ayant une déclaration position:absolute|relative|fixed.

Dans ce cas l'IMG sera placée par rapport à la balise A parente.
02/11/2012, 15h05
laurentSc

D'accord ; du coup, je comprends bien a IMG en position absolute, mais pourquoi a en position relative ?
02/11/2012, 15h22
NoSmoking

dans le cas présent cela place l'IMG par rapport à la balise A qui EST POSITIONNEE, impression de déjà écrit !

:!: En absence de parent positionné on remonte jusqu'à l'élément HTML.
02/11/2012, 15h48
laurentSc

Oui, c'est vrai, tu l'avais déjà dit :

Citation:

par rapport au premier de ses parents positionnés

mais je n'avais pas fait attention...