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

**laurentSc** · 31/10/2012, 00h00

Bonsoir,

je n'arrive pas à faire marcher ce code :

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

**Bovino** · 31/10/2012, 07h51

Code :

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

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

**laurentSc** · 31/10/2012, 09h45

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

En effet, l'erreur de copier-coller !

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 ?

**andry.aime** · 31/10/2012, 10h15

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

**Auteur** · 31/10/2012, 14h03

salut,

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

**laurentSc** · 31/10/2012, 23h44

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 :

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

**andry.aime** · 01/11/2012, 03h41

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

A+.

**NoSmoking** · 01/11/2012, 09h21

Bonjour,

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

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

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

inverses l'ordre dans le HTML

, ou utilises la méthode donnée par andry.aime.

On notera que tu peux réaliser cela en pure CSS

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

**laurentSc** · 01/11/2012, 22h19

Merci NoSmoking car grâce à toi, j'ai la solution :

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

**NoSmoking** · 02/11/2012, 14h33

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