Infobulle imagée au survol d'un lien

**magikman** · 14/01/2007, 09h31

Bonjour à tous et merci d'avance aux réponses que vous pourrez m'apporter.
Malgré maintes et maintes recherches sur le forum j ene parviens pas à trouver LA solution.

En gros j'ai un lien qui au survol doit m'afficher l'image qu'il représente. Cette image dans mon code se trouve juste après le lien(pour qu'elle soit déjà dans le cache lors de l'appel)

Code :

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

<td><a href="#" title="gna gna">gnagna</a><img src="./img/posters/1_s.jpg" alt="gna" /></td>

je parcours tous les liens qui m'intéressent pour y associer l'évènement de survol (de façon aussi à respecter un maximum la modularisation)

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
function thumb_them_all() {
	var liste = document.getElementById('filmsList');
	var links = liste.getElementsByTagName("a");
 
	for (var i=0; i<links.length; i++){
		var link = links[i];
 
		link.onmouseover=move;
 
		link.onmousemove=move;
 
		link.onmouseout = function() {
			hide_thumb(this);
		}
 
	}
 
}

Déjà ici je ne suis pas sûr de devoir appeller la fonction move au survol et au déplacement de la souris. Qu'en dites-vous?

Voici la fonction move qui intercepte les mouvements et appelle l'image à bouger (show_thumb)

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
function move(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
	show_thumb(this, cursor);
}

Ensuite je décide de sortir ma thumbnail du flux via css en lui appliquant une classe

Code :

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

1
2
3
4
5
6
7
8
function show_thumb(elt, cursor){
			var parent = elt.parentNode;
			var childList = parent.childNodes;
			var childImage = childList[1];
			childImage.setAttribute('class', "thumb_title_on");
			childImage.style.left=cursor.x+"px";
			childImage.style.top=cursor.y+"px";
		}

Le problème final est que mon image apparaît décalée vers la droite (plus de 250px) sans qu'aucune règle css n'en soit la cause. Et sous IE c'est la catastrophe, elle n'apparaît tout bonnement pas :s

J'ai réellement besoin d'aide ou du moins d'un conseil ou un sens dans lequel chercher

Merci à tous, encore une fois.

**Auteur** · 14/01/2007, 12h58

bonjour,

Une info-bulle avec image en 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<html>
<head>
<title></title>
<style>
<!--
/* INFOS BULLES */
a.info_image {
  text-decoration: none;
  position: relative;
  /*z-index: 0;*/
}
 
a.info_image span {
  display: none;
}
 
a.info_image:hover {
  text-decoration: none;
  background: none; /* HACK IE */
  /*z-index: 1;*/
}
 
a.info_image:hover span {
  display: block;
  position: absolute;
  top: 10px;
  left: 40px;
  border: none;
}
img{
border: none;
}
//-->
</style>
</head>
 
<body>
bla bla bla bla bla bla bla bla bla bla bla bla
 
<b><a href="#" class="info_image">ton lien
<span><img src="ImagePopUp.gif" alt="" /></span>
</a></b>
 
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
 
 
</body>
 
</html>

**magikman** · 14/01/2007, 13h32

Immense merci mais j'aurai désiré qu'elle suive la souris.
Je suis sûr qu'il n'y a que deux/trois lignes de javascript

**magikman** · 14/01/2007, 13h43

Et de plus j'aimerais qu'au bout de 2secondes elle disparaisse

mais bon c'est pour plus tard.

Pourrais-tu m'orienter vers une légère solution javascript en utilisant ce css pour la faire suivre la souris?

**Auteur** · 15/01/2007, 18h52

Envoyé par magikman

Immense merci mais j'aurai désiré qu'elle suive la souris.
Je suis sûr qu'il n'y a que deux/trois lignes de javascript

deux liens :
http://perso.orange.fr/coin.des.expe...s/faq9_47.html
http://perso.orange.fr/coin.des.expe.../faq9_47b.html
les scripts ne sont pas tous compatibles avec les navigateurs, il y a des restrictions. Si tu veux que ta bulle suive la souris utilise les événements onmousemove (pour l'afficher) et onmouseout (pour la cacher) au lieu de onmouseover et onmouseout.

Et de plus j'aimerais qu'au bout de 2secondes elle disparaisse mais bon c'est pour plus tard.

pas évident ça, pour une simple raison : il faudra gérer plusieurs chronos si plusieurs bulles sont dans la page. Mais je vais voir comment réaliser ce script à partir des exemples ci-dessus.

**Auteur** · 15/01/2007, 23h16

j'ai repris le script utilisé dans les liens que je t'ai donné plus haut :

voici le script original (affiche le code source de la page pour le voir) :

Code javascript :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
/* Script "z'experts" : http://perso.wanadoo.fr/coin.des.experts/
   delivre sans aucune garantie, ni des auteurs, ni du gouvernement. 
   Diffusion libre, mais merci de conserver cette signature :-)  */
 
/* Attention au doctype : si vous en mettez un (c'est quand meme mieux) et 
   si voulez que ca fonctionne avec IE6 il faut un HTLM 4 transitional **SANS URL**
   (cf ci-dessus), c.a.d. IE6 doit rester dans son mode "microsoft".
   Toujours ˆ cause des bugs de IE6, n'essayez pas de permuter les
   tests sur document.all et sur document.getElementById */   
 
/* Les bulles doivent avoir ete preparees dans autant de calques separes
   en position:absolute (sans qu'il soit necessaire de preciser de top ou 
   left) que l'on rendra invisible (visibility:hidden). Il est important 
   d'avoir fixe la largeur et la hauteur de ces calques-bulles EN PIXELS. */
 
 /* La fonction bullepop() qui ouvre la bulle d'aide doit etre appelee 
    avec 2 arguments:
   - le premier est l'identificateur (ID) du calque a faire apparaitre. 
   - LE DEUXIEME EST OBLIGATOIREMENT "event" (sans les guillemets) 
   c.a.d. un mot cle du javascript.
  */
 
var bulleStyle=null;
 
if (!document.layers && !document.all && !document.getElementById)
   event="chut";  //pour apaiser NN3 et autres antiquites
 
 
function bullepop(idd,evt)
{
 
 
 var xfenetre,yfenetre,xpage,ypage,element=null;
 var offset= 20;           // decalage par defaut
 var bulleWidth=200;       // largeur par defaut 
 var hauteur=50;           // hauteur par defaut
 bulleStyle=null;
 
  if (document.layers) 
  {
    bulleStyle=document.layers[idd];
    xpage = evt.pageX ; ypage  = evt.pageY;
    xfenetre = xpage ;yfenetre = ypage ;		
  } 
  else if (document.all)
  {
    element=document.all[idd]
    xfenetre = evt.x ;yfenetre = evt.y ;
    xpage=xfenetre ; ypage=yfenetre	;	
    if (document.body.scrollLeft) xpage = xfenetre + document.body.scrollLeft ; 
    if (document.body.scrollTop) ypage = yfenetre + document.body.scrollTop;
  } 
  else if (document.getElementById)
  {
	element=document.getElementById(idd)
    xfenetre = evt.clientX ; yfenetre = evt.clientY ;
    xpage=xfenetre ; ypage=yfenetre	;	
    if(evt.pageX) xpage = evt.pageX ;
    if(evt.pageY) ypage  = evt.pageY ;
  }
 
  if(element)  bulleStyle=element.style;
 
  if(bulleStyle) 
  {
 
     var yp0=ypage;
		 var yf0=yfenetre;
 
 
     /* tests incongrus ˆ cause d'Opera5 */
     if(bulleStyle.width) bulleWidth = parseFloat(bulleStyle.width);
     if(bulleStyle.height) hauteur = parseFloat(bulleStyle.height);
 
 
     /* on met la bulle ˆ gauche du pointeur (si c'est possible) 
        et en haut du pointeur si on est assez bas dans l'ecran */
 
     if (xfenetre > bulleWidth+offset) 
        xpage=xpage-bulleWidth-offset;
     else
     {
         if (xfenetre >0.5*bulleWidth+offset) 
            xpage=xpage-0.5*bulleWidth-offset;
		 else
            xpage=xpage+15;
     }
 
     if ( yfenetre > hauteur+offset ) 
        ypage=ypage-hauteur-offset
     else 
        ypage=ypage+offset;
 
		/* a cause des debilites d'Opera5 il faut rectifier 'ypage' pour eviter
		   que la bulle ne s'ouvre par-dessus la souris. La bulle s'ouvrira
			 TOUJOURS en bas avec Opera5. Derniere vacherie : il faut faire le test sur
			 bulleStyle.width pour se proteger des distraits qui n'auront pas
			 rempli bulleStyle.height */
 
    if (!bulleStyle.width)	
       ypage=yfenetre+offset;
    if(typeof(bulleStyle.left)=='string')
    {
         bulleStyle.left=xpage+'px'; bulleStyle.top=ypage+'px';
    } 
    else
    {
         bulleStyle.left=xpage;
         bulleStyle.top=ypage ;
    }
     bulleStyle.visibility="visible";
     bulleStyle.zIndex="99";
  }
 
}
 
function couic()
{
  if (bulleStyle)
  {
     bulleStyle.visibility="hidden";
  }
}

avec cette feuille de style pour la bulle :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* style pour les bulles. Il faudra rajouter width et height */
 
.sbulle 
{
 position:absolute;
  visibility:hidden;
  background: #ffa;
  padding: 4px;
  text-align: center;
  border:2px ridge #ffa;
  height: 20px;
  width: 200px;
}

j'ai modifié le script ci-dessus pour y ajouter la temporisation de 2 secondes et faire que la bulle suive la souris. Voici un exemple :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
/* style pour les bulles. Il faudra rajouter width et height */
 
.sbulle 
{
 position:absolute;
  visibility:hidden;
  background: #ffa;
  padding: 4px;
  text-align: center;
  border:2px ridge #ffa;
  height: 20px;
  width: 200px;
}
 
//-->
</style>
 
 
<!-- ================== script de bulle d'aide ================== -->
 
<script type="text/javascript">
<!--
/* Script "z'experts" : http://perso.wanadoo.fr/coin.des.experts/
   delivre sans aucune garantie, ni des auteurs, ni du gouvernement. 
   Diffusion libre, mais merci de conserver cette signature :-)  */
   
/* Attention au doctype : si vous en mettez un (c'est quand meme mieux) et
   si voulez que ca fonctionne avec IE6 il faut un HTLM 4 transitional **SANS URL**
   (cf ci-dessus), c.a.d. IE6 doit rester dans son mode "microsoft".
   Toujours ˆ cause des bugs de IE6, n'essayez pas de permuter les
   tests sur document.all et sur document.getElementById */   
 
/* Les bulles doivent avoir ete preparees dans autant de calques separes
   en position:absolute (sans qu'il soit necessaire de preciser de top ou 
   left) que l'on rendra invisible (visibility:hidden). Il est important 
   d'avoir fixe la largeur et la hauteur de ces calques-bulles EN PIXELS. */
 
 /* La fonction bullepop() qui ouvre la bulle d'aide doit etre appelee 
    avec 2 arguments:
   - le premier est l'identificateur (ID) du calque a faire apparaitre. 
   - LE DEUXIEME EST OBLIGATOIREMENT "event" (sans les guillemets) 
   c.a.d. un mot cle du javascript.
  */
 
var bulleStyle=null;
 
if (!document.layers && !document.all && !document.getElementById)
   event="chut";  //pour apaiser NN3 et autres antiquites
 
 
function bullepop(idd,evt)
{
 
    
 var xfenetre,yfenetre,xpage,ypage,element=null;
 var offset= 20;           // decalage par defaut
 var bulleWidth=200;       // largeur par defaut 
 var hauteur=50;           // hauteur par defaut
 bulleStyle=null;
 
  if (document.layers) 
  {
    bulleStyle=document.layers[idd];
    xpage = evt.pageX ; ypage  = evt.pageY;
    xfenetre = xpage ;yfenetre = ypage ;                
  } 
  else if (document.all)
  {
    element=document.all[idd]
    xfenetre = evt.x ;yfenetre = evt.y ;
    xpage=xfenetre ; ypage=yfenetre     ;       
    if (document.body.scrollLeft) xpage = xfenetre + document.body.scrollLeft ; 
    if (document.body.scrollTop) ypage = yfenetre + document.body.scrollTop;
  } 
  else if (document.getElementById)
  {
        element=document.getElementById(idd)
    xfenetre = evt.clientX ; yfenetre = evt.clientY ;
    xpage=xfenetre ; ypage=yfenetre     ;       
    if(evt.pageX) xpage = evt.pageX ;
    if(evt.pageY) ypage  = evt.pageY ;
  }
    
  if(element)  bulleStyle=element.style;
                        
  if(bulleStyle) 
  {
   
     var yp0=ypage;
                 var yf0=yfenetre;
                 
 
     /* tests incongrus ˆ cause d'Opera5 */
     if(bulleStyle.width) bulleWidth = parseFloat(bulleStyle.width);
     if(bulleStyle.height) hauteur = parseFloat(bulleStyle.height);
 
                 
     /* on met la bulle ˆ gauche du pointeur (si c'est possible) 
        et en haut du pointeur si on est assez bas dans l'ecran */
                                
     if (xfenetre > bulleWidth+offset) 
        xpage=xpage-bulleWidth-offset;
     else
     {
         if (xfenetre >0.5*bulleWidth+offset) 
            xpage=xpage-0.5*bulleWidth-offset;
                 else
            xpage=xpage+15;
     }
 
     if ( yfenetre > hauteur+offset ) 
        ypage=ypage-hauteur-offset
     else 
        ypage=ypage+offset;
 
                /* a cause des debilites d'Opera5 il faut rectifier 'ypage' pour eviter
                   que la bulle ne s'ouvre par-dessus la souris. La bulle s'ouvrira
                         TOUJOURS en bas avec Opera5. Derniere vacherie : il faut faire le test sur
                         bulleStyle.width pour se proteger des distraits qui n'auront pas
                         rempli bulleStyle.height */
 
    if (!bulleStyle.width)      
       ypage=yfenetre+offset;
    if(typeof(bulleStyle.left)=='string')
    {
         bulleStyle.left=xpage+'px'; bulleStyle.top=ypage+'px';
    } 
    else
    {
         bulleStyle.left=xpage;
         bulleStyle.top=ypage ;
    }
     bulleStyle.visibility="visible";
     bulleStyle.zIndex="99";
  }
 
}
/*
function couic()
{
  if (bulleStyle)
  {
     bulleStyle.visibility="hidden";
  }
}
*/
 
/** Ajout d un chrono pour les bulles **/
var tabChrono = new Array();
 
function couicTime(idd,n)
{
  document.getElementById(idd).style.visibility = "hidden";
  tabChrono[n]=null;
}
 
function couic(idd)
{
  var n=0;
  while (tabChrono[n]!=null)
        n++;
 
  if(document.getElementById(idd))
  {
    tabChrono[n] = setTimeout(function(){couicTime(idd,n)},"2000");
  }
}
 
//-->
</script>
 
</head>
 
<body>
<div onmousemove="bullepop('bulle',event)" onmouseout="couic('bulle')">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
<br><br><br>
<div onmousemove="bullepop('bulle2',event)" onmouseout="couic('bulle2')">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
<br><br><br>
<div onmousemove="bullepop('bulle3',event)" onmouseout="couic('bulle3')">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
 
 
<div id="bulle" class="sbulle">Ma jolie bulle</div>
<div id="bulle2" class="sbulle" style="color: #00F">une autre bulle</div>
<div id="bulle3" class="sbulle" style="color: #00F">une 3ème bulle !!</div>
 
 
</body>
 
</html>

J'ai uniquement modifé la fonction couic(), ajouté la fonction couicTime() et un tableau. Maintenant la fonction couic() prend comme paramètre id de la bulle à cacher (cf. exemple).

Code javascript :

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
 
/** Ajout d un chrono pour les bulles **/
var tabChrono = new Array();
 
function couicTime(idd,n)
{
  document.getElementById(idd).style.visibility = "hidden";
  tabChrono[n]=null;
}
 
function couic(idd)
{
  var n=0;
  while (tabChrono[n]!=null)
        n++;
 
  if(document.getElementById(idd))
  {
    tabChrono[n] = setTimeout(function(){couicTime(idd,n)},"2000");
  }
}

J'enregistre dans un tableau tous les id des timer qui se produisent. Lorsque le temps est écoulé (la bulle disparait), je place null au timer en question.
Pour éviter que le contenu du tableau de s'agrandisse trop vite, je le scanne à la recherche d'une case null : si j'en trouve une, cette case contiendra un nouvel id du timer.

[edit]j'ai quelques souci avec IE : visiblement c'est au niveau de l'exécution de la fonction contenue dans le setTimeout()[/edi]

**magikman** · 16/01/2007, 14h39

Waouw, je suis comblé et je te remercie chaleureusement pour le travail accompli à ma place

Je ne sais comment te remercier !!!!

Infobulle imagée au survol d'un lien

JavaScript

Vue hybride

Discussions similaires

Partager

Partager