onMouseOver: commentaire d'un lien

**Boromus** · 19/02/2007, 17h15

Salut!
J'aimerais que vous m'aidiez pour que, grâce au JavaScript, je puisse afficher un commentaire lorsque la souris passe sur le lien.
Je ne sais pas quelle fonction utiliser, ...
En gros je ne sais pas comment faire!

J'aimerais afficher un commentaire (ex: Cliquez ici pour lire le résumé de...) sous la souris ou alors dans un cadre...

AIDEZ-MOI SVP!!!

**SpaceFrog** · 19/02/2007, 17h19

une petite recherche avec "infobulle javascript" ...

**Boromus** · 19/02/2007, 21h27

C'est déja fait mais je ne comprends pas les réponses pour certaines et ce qui m'intéresse c'est d'afficher le commentaire grace à JavaScript, pas grace à une feuille de style...
Je me permet donc de redemander de l'aide...

**N1bus** · 19/02/2007, 22h44

sinon tu as aussi l'attribut title :

Code HTML :

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

<a href="tonlien.html" target="_top" title="Cliquez ici pour lire le résumé de...">Le lien</a>

**Boromus** · 20/02/2007, 09h16

J'y ai pensé mais (peut-etre que c'est un problème de navigateur) rien ne s'affiche:

Code :

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

<li><a href="#histoire" title="Le résumé de l'histoire des terres d'Ilienne pour vous plonger dans l'univers du jeu!">I. L'histoire</a></li>

Pourtant il n'y a rien...

Avez vous une solution javascript...?

**N1bus** · 20/02/2007, 09h48

Tiens, cadeau :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<div id="bulle" style="position: absolute;"></div>
<script>
decal_x = 25;
decal_y = -15;
 
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
        document.getElementById("bulle").innerHTML = "<table border='1' bordercolor='#990000' style='background-color: #FFFFFF;' cellpadding='3' cellspacing='0'><tr><td><font color='#999999' face='verdana'size='1'>"+contenu+"</font></td></tr></table>";
}
function suivre_souris0(e)
{
        if (navigator.appName=="Microsoft Internet Explorer")
        {
                var x = event.x + document.body.scrollLeft;     var y = event.y + document.body.scrollTop;
        }
        else
        {
                var x =  e.pageX;var y =  e.pageY;
        }
        document.getElementById("bulle").style.left = x + decal_x; document.getElementById("bulle").style.top  = y + decal_y;
}
function disparaitre0()
{
        document.getElementById("bulle").innerHTML = '';
}
</script>
</head>
 
<body>
<a href="monlien.htm" onMouseOver="pop0('le texte info bulle')" onMouseOut="disparaitre0()">le lien</a>
</body>
</html>

je ne sais plus où je l'avais trouvé mais ça fonctionne.

Note : la version avec attribut tittle que je t'ai donné plus haut fonctionne sur IE6 chez moi.

**Boromus** · 20/02/2007, 10h12

encore merci!
Mais ca ne fonction toujours pas...
Peut être un probleme de feuille de style.
Voici celleque j'utilise:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
h1 {margin-left: 15%; margin-right: 15%; border-width: 1; border-style: solid; text-align: center; font-size: 32pt; color: blue}
h2 {margin-left: 20%; margin-right: 20%; border-width: 1; border-style: solid; font-size: 20pt; text-align: center; color: maroon}
h3 {margin-left: 38%; margin-right: 38%; border-width: 1; border-style: solid; font-size: 16pt; text-align: center; color: green}
h3.prime {margin-left: 25%; margin-right: 25%; border-width: 1; border-style: solid; font-size: 16pt; text-align: center; color: green}
p {font-size: 16pt; text-align: left}
p.legal {font-size: 8pt; font-variant: small-caps; text-align: center}
ul {font-size: 16pt; text-align: center}
li {font-size: 14pt; text-align: left; margin-left: 8%}
adress {text-align: center}
a:link {color: #7a7a7a; text-decoration:underline;}
a:visited {color: #838383; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}

**Auteur** · 20/02/2007, 12h08

bonjour,

http://www.developpez.net/forums/sho...ighlight=bulle
je donne un exemple avec une info-bulle en CSS et plus loin dans la discussion je donne des liens vers des scripts.

**Boromus** · 20/02/2007, 13h12

Ouahh! Merci
Une dernière chose:

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
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
<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)},"0");
  }
}
 
//-->
</script>

Comment faire pour que la bulle soit à droite de ma souris et au même niveau (hauteur)?? avec firefox

**Auteur** · 20/02/2007, 16h50

Envoyé par Boromus

Comment faire pour que la bulle soit à droite de ma souris et au même niveau (hauteur)?? avec firefox

avec ce script tu ne peux pas...

Il manque des paramètres : il faut déterminer la largeur du document.

**Boromus** · 20/02/2007, 17h17

oooooooooooo....

Resolu qand meme!

**Auteur** · 20/02/2007, 17h20

sous quel navigateur ?
quel est le code complet de ta page ?

**Boromus** · 20/02/2007, 17h22

non, oubli.
C'est bon en fait!

**Boromus** · 20/02/2007, 17h25

le probleme c'était que lorsque la page est complétement en haut, c'est bon mais que si je fais défiler la page un peu vers le bas, l'infobulle s'affiche plus haut.
en fait, sa position est déterminée grace à des coordonnées je suppose...
j'aurais voulu qu'elle soit déterminée selon la position de la souris ou alors selon le lien:

exemple:

>lorsque ya pas la souris
le lien.

>lorsque ya la souris
le lien ::le comentaire

**Auteur** · 20/02/2007, 23h12

Envoyé par Boromus

le probleme c'était que lorsque la page est complétement en haut, c'est bon mais que si je fais défiler la page un peu vers le bas, l'infobulle s'affiche plus haut.

en effet, je n'avais pas vu ce bug...

Envoyé par Boromus

en fait, sa position est déterminée grace à des coordonnées je suppose...
j'aurais voulu qu'elle soit déterminée selon la position de la souris ou alors selon le lien

Justement la position de la bulle est déterminée par rapport à la position de la souris dans le document. D'après ce que j'ai vu, le calcul en x et y tient compte du scroll.

Le problème est que chaque navigateur fonctionne différemment et là toute la difficulté. Moi même je m'y suis cassé la tête

Sinon tu peux te rabattre sur l'info-bulle en CSS en remplaçant l'image par du texte. Je dois avouer, n'avoir rien de mieux à te proposer

[edit]
essaye ce code (sans aucune garantie) :
http://www.developpez.net/forums/sho...d.php?t=283173
[/edit]

onMouseOver: commentaire d'un lien

JavaScript

Discussions similaires

Partager

Partager