Infobulles multiples à sélectionner

**F@bien.fd** · 26/11/2016, 22h20

Bonsoir,

Voici un petit problème que je n'arrive évidemment pas à régler...

Jusqu'à présent les infobulles ne me présentaient aucune difficulté ni dans la forme, la transparence ou la position. Habituellement j'inclus le script dans le head, puis j'utilise un appel avec un div et une class.

Et puis l'idée m'est venue de pouvoir disposer de plusieurs aspect d'infobulles dans la même page web.
Je suis donc parti de l'idée de :
1-créer une page html ou php avec les appels ;
2- créer un .css avec les différentes versions des infobulles ;
3- créer des fichier externes .jc chacun avec son appel à la version du .css qui le concerne.

Problème :
Les infobulles apparaissent bien suivant leurs versions respectives, mais impossible de les placer où je le souhaite...

Voici les éléments en question :

style_bulle.css

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
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
.infobulle_01{
	position: absolute;	
	visibility : hidden;
	border: 2px solid red;  
	padding: 4px;
	font-family: Arial, Verdana;
	font-size: 12px;
	color : navy;
	background-color: #FFCC66; 
	opacity : 0.85; 
	-moz-opacity : 0.85; 
	-khtml-opacity : 0.85; 
	filter : alpha(opacity=85); 	
}
 
 
.infobulle_02{
	position: absolute;	
	visibility : hidden;
	border: 2px solid blue;  
	padding: 4px;
	font-family: Arial, Verdana;
	font-size: 12px;
	color : red;
	background-color: white; 
	opacity : 0.85; 
	-moz-opacity : 0.85; 
	-khtml-opacity : 0.85; 
	filter : alpha(opacity=85); 	
}
 
.infobulle_03{
	position: absolute;	
	visibility : hidden;
	border: 1px solid black;  
	padding: 4px;
	font-family: Arial, Verdana;
	font-size: 12px;
	color : green;
	background-color: white; 
	opacity : 0.85; 
	-moz-opacity : 0.85; 
	-khtml-opacity : 0.85; 
	filter : alpha(opacity=85); 	
}

infobulle-01.js

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
				function GetId(id)
				{
				return document.getElementById(id);
				}
				var i=false; 
 
				function move_01(e) {
 
 
if (document.body)
{
var larg = ((document.body.clientWidth-1936)/2); /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (document.body.clientHeight);
}
 
else
{
var larg = ((window.innerWidth-1936)/2);  /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (window.innerHeight);
}										
				  if(i) {  // Si la bulle est visible, on calcule en temps réel sa position idéale
				    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
				    GetId("curseur1").style.left=e.pageX + 5-larg+"px";
				    GetId("curseur1").style.top=e.pageY - 106+"px";
				    }
				    else { // Modif proposé par TeDeum, merci à lui
				    if(document.documentElement.clientWidth>0) {
				        GetId("curseur1").style.left= 20-larg+event.x+document.documentElement.scrollLeft+"px";
				        GetId("curseur1").style.top= - 96+event.y+document.documentElement.scrollTop+"px";
				    }
				    else {
				        GetId("curseur1").style.left= 20-larg+event.x+document.body.scrollLeft+"px";
				        GetId("curseur1").style.top= - 96+event.y+document.body.scrollTop+"px";
				    }
				    }
				  }
				}
 
				function montre_01(text) {					
				  if(i==false) {
				  GetId("curseur1").style.visibility="visible"; // Si il est caché (la vérif n'est qu'une sécurité) on le rend visible.
				  GetId("curseur1").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
				  i=true;
				  }
				}
 
				function cache_01() {
				if(i==true) {
				GetId("curseur1").style.visibility="hidden"; // Si la bulle était visible on la cache
				i=false;
				}
				}
 
				document.onmousemove=move_01; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.

infobulle-02.js

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
				function GetId(id)
				{
				return document.getElementById(id);
				}
				var i=false; 
 
				function move_02(e) {
 
 
if (document.body)
{
var larg = ((document.body.clientWidth-1936)/2); /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (document.body.clientHeight);
}
 
else
{
var larg = ((window.innerWidth-1936)/2);  /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (window.innerHeight);
}										
				  if(i) {  // Si la bulle est visible, on calcule en temps réel sa position idéale
				    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
				    GetId("curseur2").style.left=e.pageX + 5-larg+"px";
				    GetId("curseur2").style.top=e.pageY - 106+"px";
				    }
				    else { // Modif proposé par TeDeum, merci à lui
				    if(document.documentElement.clientWidth>0) {
				        GetId("curseur2").style.left= 20-larg+event.x+document.documentElement.scrollLeft+"px";
				        GetId("curseur2").style.top= - 96+event.y+document.documentElement.scrollTop+"px";
				    }
				    else {
				        GetId("curseur2").style.left= 20-larg+event.x+document.body.scrollLeft+"px";
				        GetId("curseur2").style.top= - 96+event.y+document.body.scrollTop+"px";
				    }
				    }
				  }
				}
 
				function montre_02(text) {					
				  if(i==false) {
				  GetId("curseur2").style.visibility="visible"; // Si il est caché (la vérif n'est qu'une sécurité) on le rend visible.
				  GetId("curseur2").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
				  i=true;
				  }
				}				
 
				function cache_02() {
				if(i==true) {
				GetId("curseur2").style.visibility="hidden"; // Si la bulle était visible on la cache
				i=false;
				}
				}	
 
				document.onmousemove=move_02; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.

infobulle-03.js

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
				function GetId(id)
				{
				return document.getElementById(id);
				}
				var i=false; 
 
				function move_03(e) {
 
 
if (document.body)
{
var larg = ((document.body.clientWidth-1936)/2); /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (document.body.clientHeight);
}
 
else
{
var larg = ((window.innerWidth-1936)/2);  /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (window.innerHeight);
}										
				  if(i) {  // Si la bulle est visible, on calcule en temps réel sa position idéale
				    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
				    GetId("curseur3").style.left=e.pageX + 5-larg+"px";
				    GetId("curseur3").style.top=e.pageY - 106+"px";
				    }
				    else { // Modif proposé par TeDeum, merci à lui
				    if(document.documentElement.clientWidth>0) {
				        GetId("curseur3").style.left= 20-larg+event.x+document.documentElement.scrollLeft+"px";
				        GetId("curseur3").style.top= - 96+event.y+document.documentElement.scrollTop+"px";
				    }
				    else {
				        GetId("curseur3").style.left= 20-larg+event.x+document.body.scrollLeft+"px";
				        GetId("curseur3").style.top= - 96+event.y+document.body.scrollTop+"px";
				    }
				    }
				  }
				}
 
				function montre_03(text) {					
				  if(i==false) {
				  GetId("curseur3").style.visibility="visible"; // Si il est caché (la vérif n'est qu'une sécurité) on le rend visible.
				  GetId("curseur3").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
				  i=true;
				  }
				}				
 
				function cache_03() {
				if(i==true) {
				GetId("curseur3").style.visibility="hidden"; // Si la bulle était visible on la cache
				i=false;
				}
				}	
 
				document.onmousemove=move_03; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.

Essai.html

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<title>Info Bulle Javascript</title>
 
<style type="text/css" media="all"></style>	
<link rel="stylesheet" type="text/css" href="style_bulle.css" media="all">
<script language="Javascript" type="text/javascript" src="infobulle-01.js"></script>
<script language="Javascript" type="text/javascript" src="infobulle-02.js"></script>
<script language="Javascript" type="text/javascript" src="infobulle-03.js"></script>
</head>
<body>
 
<h1>Infobulle Javascript configurable</h1>
 
<div id="curseur1" class="infobulle_01"> </div>	
<div id="curseur2" class="infobulle_02"> </div>
<div id="curseur3" class="infobulle_03"> </div>
 
 
<br><br><br>
 
<a  
onmouseover="montre_01('&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache_01()">utilisation du SetUp</a>	</p>
<br><br><br>
 
<p>
<a href="#">
<img src="supergeek.png" alt="Une image test" 		 
onmouseover="montre_02('&nbsp;... Cela vous donnera la solution qui est <br>la suivante.<br>');"
onmouseout="cache_02();"></a>
</p>
<br><br><br>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre_03('&nbsp;... Vous savez compter dans les cas suivants<br>');"
onmouseout="cache_03();"></a>
</p>
<br><br><br>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre_01('&nbsp;Vous parlez de trop.<br>');"
onmouseout="cache_01();"></a>
</p>
 
<br><br><br>
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre_02('&nbsp;Trop <b>fatiguant</b> pour gagner');"
onmouseout="cache_02();"></a>
</p>
<br><br><br>
 
<h3><p><a href="#" style="textDecoration:none; font-size:13px; font-weight:bold; color:#00ff00";  href="http://ninaperf.free.fr/remerciements.php" target="_blank"  
onmouseover="this.style.color='#f7c80d'; this.style.textDecoration='none'; montre_03('&nbsp;Cela sera presque possible.')";
onmouseout="this.style.color='#00ff00'; cache_03()";><span style="textDecoration:none";> utilisation du SetUp</span></a></h3>
<br><br><br>
 
 
</body>
</html>

Si quelqu'un a une idée sur la ou les modifications à apporter... et bien merci par avance.

**Watilin** · 27/11/2016, 02h50

Tout ça me paraît bien maladroit.

Commençons par le code HTML. Mis à part quelques erreurs évidentes, il a l’air en accord avec le doctype. Cependant, ce n’est pas un très bon doctype, il est vieux (HTML 4) et laxiste (Transitional)… Au vu des conseils que je vais te donner après, je te recommande d’opter pour le doctype strict que voici :

Code html :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ou le doctype HTML 5 qui est beaucoup plus simple :

Code html :

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

<!DOCTYPE html>

Fais des tests avec le validateur et tu verras ce qui ne va pas dans ton code. Le validateur pour HTML 5 est plus intéressant, mais le doctype HTML 4 Strict a l’avantage de te signaler un certain nombre de problèmes dormants dans ton code…

Voici un exemple repris de ton code, réindenté et débarrassé d’une majorité de ses problèmes :

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
<!DOCTYPE html>
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Info Bulle Javascript</title>
  <style type="text/css" media="all"></style>
  <link rel="stylesheet" type="text/css" href="style_bulle.css" media="all">
  <script type="text/javascript" src="infobulle-01.js"></script>
  <script type="text/javascript" src="infobulle-02.js"></script>
  <script type="text/javascript" src="infobulle-03.js"></script>
</head>
<body>
 
<h1>Infobulle Javascript configurable</h1>
 
<div id="curseur1" class="infobulle_01"></div>
<div id="curseur2" class="infobulle_02"></div>
<div id="curseur3" class="infobulle_03"></div>
 
<br><br><br>
 
<p>
  <a onmouseover="montre_01('&nbsp;On parle du <b>SetUp</b>.')"
      onmouseout="cache_01()">utilisation du SetUp</a>
</p>
 
<br><br><br>
 
<p>
  <a href="#">
    <img src="supergeek.png" alt="Une image test"
        onmouseover="montre_02('&nbsp;… Cela vous donnera la solution qui est <br>la suivante.<br>');"
        onmouseout="cache_02();">
  </a>
</p>
 
<br><br><br>
 
<p>
  <a href="#">
    <img src="supergeek.png" alt="Une image test"
        onmouseover="montre_03('&nbsp;… Vous savez compter dans les cas suivants<br>');"
        onmouseout="cache_03();">
  </a>
</p>
 
<br><br><br>
 
<p>
  <a href="#">
    <img src="supergeek.png" alt="Une image test"
        onmouseover="montre_01('&nbsp;Vous parlez de trop.<br>');"
        onmouseout="cache_01();">
  </a>
</p>
 
<br><br><br>
 
<p>
  <a href="#">
    <img src="supergeek.png" alt="Une image test"
        onmouseover="montre_02('&nbsp;Trop <b>fatiguant</b> pour gagner');"
        onmouseout="cache_02();">
  </a>
</p>
<br><br><br>
 
<h3>
  <a style="text-decoration: none; font-size:13px; font-weight:bold; color:#00ff00" href="http://ninaperf.free.fr/remerciements.php" target="_blank"
      onmouseover="this.style.color='#f7c80d'; this.style.textDecoration='none'; montre_03('&nbsp;Cela sera presque possible.')"
      onmouseout="this.style.color='#00ff00'; cache_03()">
    <span style="text-decoration: none">utilisation du SetUp</span>
  </a>
</h3>
 
<br><br><br>
 
</body>
</html>

À propos du code JS : beaucoup, beaucoup de redondance ! À peu de choses près tu as trois fois le même code. Écris une seule fonction et passe en paramètre l’élément sur lequel tu veux agir.

Code :

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

1
2
3
4
5
6
7
8
9
function montre(id, text) {
  GetId(id).style.display = '';
  GetId(id).style.display = 'block';
  GetId(id).innerHTML = text;
}

function cache(id) {
  GetId(id).style.display = 'none';
}

Edit : ajouté 'block' car '' ne suffit pas à annuler un display: none inscrit dans le code CSS.

J’ai pris la liberté de retirer la variable i et les tests associés, tu verras plus tard qu’on peut faire sans. De plus, ainsi les fonction sont plus en accord avec leurs noms. En effet, si tu fais appel à une fonction nommée montre et si, dans certains cas, elle ne montre pas ce qui est demandé, ce n’est pas très cohérent.

J’ai aussi remplacé les visibility: hidden par des display: none. Le souci avec visibility c’est que l’élément occupe toujours de l’espace (même si ça ne se voit pas quand il est en position absolue) et par conséquent le moteur d’affichage est toujours obligé de le prendre en compte dans ses calculs. C’est pas opti.

Pense à modifier ça dans ton code CSS. D’ailleurs à propos de ton CSS, tu as la possibilité d’utiliser les id de tes infobulles, c’est mieux que de créer une classe pour chaque infobulle, classe qui au final ne sert qu’une seule fois. Et tu peux du coup utiliser la même classe pour les trois infobulles afin de factoriser les styles qu’elles ont en commun.

Code html :

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

1
2
3
<div id="curseur1" class="infobulle"></div>
<div id="curseur2" class="infobulle"></div>
<div id="curseur3" class="infobulle"></div>

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
15
16
17
18
19
20
21
22
23
24
25
26
#curseur1 {
  border: 2px solid red;
  color: navy;
  background-color: #FC6;
}
 
#curseur2 {
  border: 2px solid blue;
  color: red;
  background-color: white;
}
 
#curseur3 {
  border: 1px solid black;
  color: green;
  background-color: white;
}
 
.infobulle {
  position: absolute;
  display: none;
  padding: 4px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  opacity: 0.85;
}

J’ai retiré les vieilles déclarations de compatibilité pour opacity, aujourd’hui elles ne sont plus nécessaires.

Dans ton script, j’ai retiré aussi tes commentaires (juste pour alléger), dont celui à propos de innerHTML. On t’a dit que ce n’était pas « valide ». Ce n’est pas tout à fait exact. Ça n’a jamais fait partie des spécifications (c’est en cours d’adoption par le W3C), mais c’est supporté depuis longtemps par tous les navigateurs. Les critiques qu’on peut formuler, c’est qu’il y a :

un risque d’injection XSS quand ce n’est pas toi qui contrôles le contenu à insérer (dans le cas présent c’est toi donc pas de souci),
et un problème de performance, qui peut se mitiger en utilisant à la place insertAdjacentHTML, ou en construisant un arbre DOM directement avec les méthodes createElement, appendChild, etc.

À présent, abordons les vrais problèmes. Tu as trois fichiers JS, chacun affecte une fonction à document.onmousemove. C’est un piège assez classique dans la gestion des évènements JavaScript, il faut savoir que la dernière déclaration écrase les précédentes (pour éviter ça il faut utiliser addEventListener). En théorie donc, seule la troisième infobulle suivrait le mouvement de la souris.
En pratique, si je t’ai bien compris, aucune des trois ne bouge, c’est bien ça ?

Tu devrais avoir des messages d’erreur dans la console de ton navigateur. Ouvre le panneau de développement avec la touche F12 et va sur l’onglet console. Dis-moi ce que tu vois.

J’attends ta réponse avant de continuer

**F@bien.fd** · 27/11/2016, 18h14

Bonjour et merci pour l'extrême rapidité de la réponse.

Tout d'abord qu'il soit bien dit que je suis... pur amateur. Donc ne pas hésiter à mettre le doigt où ça fait mal.

Ayant conçu une appli distribuée gratuitement pour les amateurs de bourse, j'ai été amené vu les demandes, à réaliser une aide en ligne puis un site dédié tout d'abord en html simplissime puis avec un peu de php puis avec Ajax, et évidemment à vouloir en rajouter pour le plaisir.
Je disais amateur et c'est pour cela que j'utilise le Transitional et non le Strict vu certaines erreurs que je n'arrivais pas à juguler.

Dans un premier temps j'ai donc passé la version Transitional à la moulinette afin de retirer le maximum d'erreurs non admise pour cette version. Puis j'ai construit la page Web avec la version Strict afin d'éliminer le reste, sachant que là aussi mon anglais déplorable m'a parfois joué des tours.
Je suis enfin arrivé à

This document was successfully checked as HTML 4.01 Strict!

Néanmoins je n'ai toujours pas compris pourquoi mes balises <b> devaient être absolument comprises dans un conteneur tel que <p> </p>.

Je vais voir le JS maintenant... et j'éditerai au fur et à mesure...

Pour ce qui est du code JS, j'en ai construit 3 avec pour objectif de les regrouper en un seul avec passage de paramètre, mais je ne savais pas que l'on pouvait passer deux paramètres et plus en JS, et là je crois commencer à comprendre comment au vu de la fiche css.

Si j'écris un seul code pour les trois version avec passage de paramètre il me faut donc modifier la dénomination de mon fichier .JC et ne plus faire qu'une seule dévcalaration n'est-il pas ? ? ?

Envoyé par Watilin

... trois fichiers JS, chacun affecte une fonction à document.onmousemove .../...
En théorie donc, seule la troisième infobulle suivrait le mouvement de la souris.
En pratique, si je t’ai bien compris, aucune des trois ne bouge, c’est bien ça ?

Pas exatement...
En fait les deux premieres s'affichent en left=0 et top=0 de page et seule la troisième peut se déplacer

Envoyé par Watilin

il faut savoir que la dernière déclaration écrase les précédentes (pour éviter ça il faut utiliser addEventListener).

J'ai l'impression que c'est la dernière appelée qui écrase les autres...

Envoyé par Watilin

pour éviter ça il faut utiliser addEventListener

Je ne vois pas ce que c'est comme évènement...

J'éditerai la suite si j'arrive à utiliser la console...

Nom : Capture-001.JPG
Affichages : 247
Taille : 21,0 Ko

Nom : Capture-003.JPG
Affichages : 249
Taille : 32,6 Ko

**Watilin** · 27/11/2016, 21h58

Avant tout je précise que je viens d’éditer mon message précédent car j’avais fait une boulette avec les display.

Normalement avec la console ou le débogueur tu as moyen d’examiner le contenu de la variable id. Dans le cas présent je pense que tu as oublié de modifier les endroits où tu appelles la fonction montre, car text n’est plus son premier paramètre. Il faut que tu passes l’id de l’infobulle que tu souhaites faire apparaître.

Code html :

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

1
2
  <a onmouseover="montre('curseur1', '&nbsp;On parle du <b>SetUp</b>.')"
      onmouseout="cache('curseur1')">utilisation du SetUp</a>

À propos de addEventListener, ce n’est pas un évènement, c’est une méthode. Elle te permet d’attacher plusieurs fonctions à un même évènement, en évitant ce problème d’écrasement. Voilà comment ça s’utilise :

Code :

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

1
2
3
document.addEventListener('mousemove', move_01);
document.addEventListener('mousemove', move_02);
document.addEventListener('mousemove', move_03);

Note qu’on doit retirer le on de onmousemove.

Cet exemple est provisoire puisque de toutes façons on va factoriser ces trois fonctions, et qu’à la fin il n’en restera qu’une seule. En fait, tant que tu n’auras qu’une seule fonction, tu pourras continuer à utiliser document.onmousemove si ça te semble plus simple.

Pour cette histoire de <b> qui doit être dans un <p>, c’est parce que <b> a un affichage de type inline par défaut alors que <p> est block par défaut. Quasiment tous les éléments HTML (à part les éléments de tableaux et de listes) ont par défaut un de ces deux types d’affichage. La DTD a été construite autour de ça.

En gros tout ce qui suit le flot du texte (qui va tout seul à la ligne quand il y a besoin, par exemple <span>, <a>, <i>, etc.) est de type inline, et tout ce qui exige d’être seul sur sa ligne (<div>, <h1>, <h2>, etc.) est de type block.

Dans la DTD de HTML 4, il a été décidé qu’il ne pouvait pas y avoir directement d’éléments inline à la racine du body, qu’ils devaient obligatoirement être contenus dans un block.

**F@bien.fd** · 27/11/2016, 23h05

Envoyé par Watilin

Avant tout je précise que je viens d’éditer mon message précédent car j’avais fait une boulette avec les display.

ça j'avais repéré et corrigé mais j'avais oublié de le mentionner...

Envoyé par Watilin

Normalement avec la console ou le débogueur tu as moyen d’examiner le contenu de la variable id. Dans le cas présent je pense que tu as oublié de modifier les endroits où tu appelles la fonction montre, car text n’est plus son premier paramètre. Il faut que tu passes l’id de l’infobulle que tu souhaites faire apparaître.

Code html :

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

1
2
  <a onmouseover="montre('curseur1', '&nbsp;On parle du <b>SetUp</b>.')"
      onmouseout="cache('curseur1')">utilisation du SetUp</a>

ça aussi j'avais modifié mais j'en avais oublié un seul cache(), le premier évidemment...

Envoyé par Watilin

Voilà comment ça s’utilise :

Code :

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

1
2
3
document.addEventListener('mousemove', move_01);
document.addEventListener('mousemove', move_02);
document.addEventListener('mousemove', move_03);

Note qu’on doit retirer le on de onmousemove.

Là je ne pige pas puisque il n'y a plus qu'un seul fichier JS...
Donc je n'est plus de move_01 ni de move_02 ni de move_03 mais il ne reste que move.

Envoyé par Watilin

Cet exemple est provisoire puisque de toutes façons on va factoriser ces trois fonctions, et qu’à la fin il n’en restera qu’une seule. En fait, tant que tu n’auras qu’une seule fonction, tu pourras continuer à utiliser document.onmousemove si ça te semble plus simple.

Là c'est pareil, je patauge ... j'avais cru comprendre qu'il n'existe plus qu'une seule fonction et qu'elle réagissait en fonction des paramètres id et text fournis.

Envoyé par Watilin

Pour cette histoire de <b> qui doit être dans un <p>, c’est parce que <b> a un affichage de type inline par défaut alors que <p> est block par défaut. Quasiment tous les éléments HTML (à part les éléments de tableaux et de listes) ont par défaut un de ces deux types d’affichage. La DTD a été construite autour de ça.

J'avais bien lu et donc compris que ce que l'on ne pouvait plus en Strict emboiter un affichage de type block dans du inline alors qu'en Transitionnal on pouvait encore le réaliser, mais ma question était pourquoi ? Et bien j'ai la réponse... parce que La DTD a été construite autour de ça

Envoyé par Watilin

En gros tout ce qui suit le flot du texte (qui va tout seul à la ligne quand il y a besoin, par exemple <span>, <a>, <i>, etc.) est de type inline, et tout ce qui exige d’être seul sur sa ligne (<div>, <h1>, <h2>, etc.) est de type block.

Pas de doute c'est bien ce que j'avais lu avec mon anglais de bazar, merci de la confirmation.

Envoyé par Watilin

Dans la DTD de HTML 4, il a été décidé qu’il ne pouvait pas y avoir directement d’éléments inline à la racine du body, qu’ils devaient obligatoirement être contenus dans un block.

Ce que j'ignorai...
Tout cela pour dire que ça ne tourne toujours pas et donc que j'ai encore dû cafouiller lamentablement.
Voilà ce que me dit la console :
Nom : Capture-004.JPG
Affichages : 234
Taille : 82,6 Ko

Nom : Capture-004.JPG
Affichages : 234
Taille : 82,6 Ko

**Watilin** · 27/11/2016, 23h31

Envoyé par F@bien.fd

Là je ne pige pas puisque il n'y a plus qu'un seul fichier JS...
Donc je n'est plus de move_01 ni de move_02 ni de move_03 mais il ne reste que move.

Exact. Je me suis mal exprimé. En clair, vu que tu n’as plus qu’une fonction move, tu peux l’attacher comme ceci :

Code :

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

document.addEventListener('mousemove', move);

Ou bien comme ceci :

Code :

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

document.onmousemove = move;

Voilà ce que me dit la console :
Nom : Capture-004.JPG
Affichages : 234
Taille : 82,6 Ko

Ce n’est pas très utile. Il faudrait rajouter quelques instructions de debug pour y voir plus clair :

Code :

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

1
2
3
4
5
function move(id, text) {
  console.log(id);
  console.log(GetId(id));
  …
}

**F@bien.fd** · 28/11/2016, 00h37

Envoyé par Watilin

Exact. Je me suis mal exprimé. En clair, vu que tu n’as plus qu’une fonction move, tu peux l’attacher comme ceci :

Code :

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

document.addEventListener('mousemove', move);

Ou bien comme ceci :

Code :

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

document.onmousemove = move;

C'est le dernier que j'avais utilisé

Envoyé par Watilin

Ce n’est pas très utile. Il faudrait rajouter quelques instructions de debug pour y voir plus clair :

Code :

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

1
2
3
4
5
function move(id, text) {
  console.log(id);
  console.log(GetId(id));
  …
}

Il faut placer cela dans le JS ?

J'ai lancé un pas à pas et voilà les premiers résultats... Nom : Capture-006.JPG
Affichages : 265
Taille : 25,6 Ko

**Watilin** · 28/11/2016, 01h36

Au temps pour moi, je voulais parler de la fonction montre.

Code :

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

1
2
3
4
5
function montre(id, text) {
  console.log(id);
  console.log(GetId(id));
  …
}

Tu rajoutes les deux console.log au début de la fonction déjà existante.

Par contre pour tes deux nouvelles erreurs, je ne sais pas d’où ça peut venir. Peux-tu me montrer à nouveau ton code ?

**F@bien.fd** · 28/11/2016, 10h17

Tout d'abord , merci du suivi...

Tu rajoutes les deux console.log au début de la fonction déjà existante.

C'est fait.

Peux-tu me montrer à nouveau ton code ?

OK voici :

style_bulle.css

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
15
16
17
18
19
20
21
22
23
24
25
26
#curseur1 {
  border: 2px solid red;
  color: navy;
  background-color: #FFCC66;
}
 
#curseur2 {
  border: 2px solid blue;
  color: red;
  background-color: white;
}
 
#curseur3 {
  border: 1px solid black;
  color: green;
  background-color: white;
}
 
.infobulle {
  position: absolute;
  display: none;
  padding: 4px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  opacity: 0.85;
}

infobulle.js

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
				function GetId(id)
				{
				return document.getElementById(id);
				}
				var i=false; 
 
				function move(id, text) {
  console.log(id);
  console.log(GetId(id));
}
 
 
if (document.body)
{
var larg = ((document.body.clientWidth-50)/2); /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (document.body.clientHeight);
}
 
else
{
var larg = ((window.innerWidth-50)/2);  /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (window.innerHeight);
}										
				  if(i) {  // Si la bulle est visible, on calcule en temps réel sa position idéale
				    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
				    GetId(id).style.left=e.pageX + 5-larg+"px";
				    GetId(id).style.top=e.pageY - 106+"px";
				    }
				    else { // Modif proposé par TeDeum, merci à lui
				    if(document.documentElement.clientWidth>0) {
				        GetId(id).style.left= 20-larg+event.x+document.documentElement.scrollLeft+"px";
				        GetId(id).style.top= - 96+event.y+document.documentElement.scrollTop+"px";
				    }
				    else {
				        GetId(id).style.left= 20-larg+event.x+document.body.scrollLeft+"px";
				        GetId(id).style.top= - 96+event.y+document.body.scrollTop+"px";
				    }
				    }
				  }
 
 
				function montre(id, text) {					
 console.log(id);
 console.log(GetId(id));
				  GetId(id).style.display = 'block'; 
				  GetId(id).innerHTML = text; 
 
				}
 
				function cache(id) {
 
				GetId(id).style.display = 'none'; 
 
				}
 
			document.onmousemove=move; 
 
		//	document.addEventListener('mousemove', move);

essai-5.html

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<title>Info Bulle Javascript</title>
 
<style type="text/css" media="all"></style>	
<link rel="stylesheet" type="text/css" href="style_bulle.css" media="all">
<script type="text/javascript" src="infobulle.js"></script>
 
</head>
<body>
 
<h1>Infobulle Javascript configurable</h1>
 
<div class="infobulle" id="curseur1"> </div>	
<div class="infobulle" id="curseur2"> </div>
<div class="infobulle" id="curseur3"> </div>
 
<p>
<br><br><br>
</p>
 
 
<p>
<a 
onmouseover="montre(curseur1, '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur1)">utilisation du SetUp</a>	
<br>
<a 
onmouseover="montre(curseur2, '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur2)">utilisation du SetUp</a>	
<br>
<a href="#">
<img src="supergeek.png" alt="Une image test" 		 
onmouseover="montre(curseur2, '&nbsp;... Cela vous donnera la solution qui est <br>la suivante.<br>');"
onmouseout="cache(curseur2);"></a>
<br><br><br></p>
 
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre(curseur3, '&nbsp;... Vous savez compter dans les cas suivants<br>');"
onmouseout="cache(curseur3);"></a>
<br><br><br></p>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre(curseur1, '&nbsp;Vous parlez de trop.<br>');"
onmouseout="cache(curseur1);"></a>
<br><br><br></p>
 
<p>
<a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre(curseur2, '&nbsp;Trop <b>fatiguant</b> pour gagner');"
onmouseout="cache(curseur2);"></a>
<br><br><br></p>
 
 
<h3><a href="#" style="textDecoration:none; font-size:13px; font-weight:bold; color:#00ff00"
onmouseover="this.style.color='#f7c80d'; this.style.textDecoration='none'; montre(curseur2, '&nbsp;Cela sera presque possible.')"
onmouseout="this.style.color='#00ff00'; cache(curseur2)"><span style="textDecoration:none"> utilisation du SetUp</span></a></h3>
<p><br><br><br></p>	    
 
</body>
</html>

**Watilin** · 28/11/2016, 15h45

Dans ton code HTML,

Code html :

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

1
2
3
<a 
onmouseover="montre(curseur1, '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur1)">utilisation du SetUp</a>

Tu confonds chaînes et variables. Tu dois mettre des guillemets autour de curseur1 car c’est une chaîne que la fonction getElementById attend.

Code html :

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

1
2
3
<a 
onmouseover="montre('curseur1', '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache('curseur1')">utilisation du SetUp</a>

Dans ton code JS, tu as refermé la fonction move trop tôt.

Code :

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

1
2
3
4
function move(id, text) {
  console.log(id);
  console.log(GetId(id));
} // cette accolade ne devrait pas être ici

Utilise des formateurs automatiques tels que celui de Firefox (l’ardoise sous Maj+F4 a un bouton « formater et indenter ») ou encore jsbeautifier.org pour te rendre compte de ce genre de problème. Avec une indentation correcte, tu vois tout de suite ce qui est en dedans ou en dehors des blocs.

Quant aux erreurs de la capture précédente, je ne vois pas d’où elles viennent… Normalement les fonctions montre et cache sont bien définies, et il n’y a pas d’erreur fatale dans ton code qui empêcherait leur création. Essaye avec un autre navigateur par acquis de conscience (les messages d’erreur de la console d’IE ne sont pas les plus explicites).

Corrige déjà ton code avec les conseils que je viens de te donner et montre-moi ce que ça donne.

**F@bien.fd** · 28/11/2016, 19h22

Envoyé par Watilin

Dans ton code HTML,
Tu confonds chaînes et variables. Tu dois mettre des guillemets autour de curseur1 car c’est une chaîne que la fonction getElementById attend.

Code html :

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

1
2
3
<a 
onmouseover="montre('curseur1', '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache('curseur1')">utilisation du SetUp</a>

Alors là j'étais persuadé que c'était une variable

comme id Grosse erreur corrigée...

Envoyé par Watilin

Dans ton code JS, tu as refermé la fonction move trop tôt.

Code :

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

1
2
3
4
function move(id, text) {
  console.log(id);
  console.log(GetId(id));
} // cette accolade ne devrait pas être ici

Corrige déjà ton code avec les conseils que je viens de te donner et montre-moi ce que ça donne.

j'ai effectivement reporté l'accolade où elle était dans sa version initiale c'est à dire évidemment avant la fonction montre(id, text)Résultat :
Bon : nous avons les bons formats et les textes adéquats.
Faux : Les infobulles s'affichent toutes sous le titre Infobulle Javascript configurable et Left = 0.

Si je déplace le bloc

Code :

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

1
2
3
<div class="infobulle" id="curseur1"> </div>	
<div class="infobulle" id="curseur2"> </div>
<div class="infobulle" id="curseur3"> </div>

sous le premier

Code :

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

1
2
3
<p>
<br><br><br>
</p>

alors l'affichage à lieu juste en dessous avec Left = 0.

**melka one** · 28/11/2016, 21h16

jour
c'est moche tous ca

j'ai pas bien compris ce que tu cherche mais j'ai fait un peut le ménage

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 
<style type="text/css">
 
#curseur1 {
  border: 2px solid red;
  color: navy;
  background-color: #FFCC66;
}
 
#curseur2 {
  border: 2px solid blue;
  color: red;
  background-color: blue;
}
 
#curseur3 {
  border: 1px solid black;
  color: green;
  background-color: gray;
}
 
.infobulle {
  position: absolute;
  display: none;
  padding: 4px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  opacity: 0.85;
}
 
</style>
 
<script>
 
		function GetId(id)
		{
		return document.getElementById(id);
		}
 
if (document.body)
{
var larg = ((document.body.clientWidth-50)/2); /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (document.body.clientHeight);
}
 
else
{
var larg = ((window.innerWidth-50)/2);  /* au lieu de ((document.body.clientWidth-936)/2) */
 
if (larg <= 0) {
    larg = -20;  /* au lieu de larg = 8; */
}
var haut = (window.innerHeight);
}
 
 
 function montre(e,id,text) {
 
		id.style.left=e.pageX + 5+"px";
		id.style.top=e.pageY + 6+"px";
		id.style.display = 'block'; 
		id.innerHTML = text; 
 
	}
 
function cache(id) {
 
	id.style.display = 'none'; 
 
	}
 
</script>
 
</head>
<body>
 
<h1>Infobulle Javascript configurable</h1>
 
<div class="infobulle" id="curseur1"> </div>	
<div class="infobulle" id="curseur2"> </div>
<div class="infobulle" id="curseur3"> </div>
 
<p>
<br><br><br>
</p>
 
 
<p>
<a 
onmouseover="montre(event,curseur1, '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur1)">utilisation du SetUp</a>	
<br>
<a 
onmouseover="montre(event,curseur2, '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur2)">utilisation du SetUp</a>	
<br>
<a href="#">
<img src="supergeek.png" alt="Une image test" 		 
onmouseover="montre(event,curseur2, '&nbsp;... Cela vous donnera la solution qui est <br>la suivante.<br>');"
onmouseout="cache(curseur2);"></a>
<br><br><br></p>
 
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre(event,curseur3, '&nbsp;... Vous savez compter dans les cas suivants<br>');"
onmouseout="cache(curseur3);"></a>
<br><br><br></p>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre(event,curseur1, '&nbsp;Vous parlez de trop.<br>');"
onmouseout="cache(curseur1);"></a>
<br><br><br></p>
 
<p>
<a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmouseover="montre(event,curseur2, '&nbsp;Trop <b>fatiguant</b> pour gagner');"
onmouseout="cache(curseur2);"></a>
<br><br><br></p>
 
 
<h3><a href="#" style="textDecoration:none; font-size:13px; font-weight:bold; color:#00ff00"
onmouseover="this.style.color='#f7c80d'; this.style.textDecoration='none'; montre(curseur2, '&nbsp;Cela sera presque possible.')"
onmouseout="this.style.color='#00ff00'; cache(curseur2)"><span style="textDecoration:none"> utilisation du SetUp</span></a></h3>
<p><br><br><br></p>	    
 
</body>
 
</body>
</html>

**F@bien.fd** · 28/11/2016, 21h43

Envoyé par melka one

jour
c'est moche tous ca

j'ai pas bien compris ce que tu cherche mais j'ai fait un peut le ménage

Je ne vois comment tu peux corriger ce que tu ne comprends pas

L'objectif est simple : sur un doc htlm ou php faire apparaître des infos bulles de divers formats possibles avec un scrip JS externe... parce qu'interne je sais faire sans problème, le css lui aussi externe et surtout pas dans le head, et évidemment le doc html qui fait appel suivant le besoin à un type script précis... dans mon cas je peux souhaiter avoir à disposition à une vingtaine ou plus de formats... que je peux appeler sans coller le scrip dans chaque page.

**melka one** · 28/11/2016, 22h17

sinon tu a essayé avec les modifs

**Watilin** · 28/11/2016, 22h54

Je crois qu’on a réussi à éliminer les erreurs du début, maintenant il faut s’atteler à faire en sort que la fonction move s’adapte à la bonne infobulle. Le problème ici c’est que tu ne peux pas passer l’id en paramètre, car la fonction est attachée à un évènement, ce n’est pas toi qui gères son appel.

Je te propose deux approches.

A. Tu crées une variable globale bulleVisible qui sera mise à jour par montre et cache, et tu utilises cette variable dans la fonction move pour accéder à la bonne infobulle.

B. Tu recenses toutes les infobulles dans un tableau au début du script, et tu parcours ce tableau dans la fonction move, en testant chaque infobulle pour savoir si elle est visible, et le cas échéant, mettre à jour sa position.

Chacune de ces deux approches a ses avantages et ses inconvénients, par exemple pour A. une variable globale ça pollue l’espace global et ça manque d’élégance ; pour B. parcourir un tableau dans une fonction susceptible d’être appelée plusieurs centaines de fois par secondes n’est pas optimal. Choisis la solution que tu préfères.

Une fois que ça sera en place, il ne te restera plus qu’à ajuster les formules pour calculer les bonnes coordonnées

**F@bien.fd** · 28/11/2016, 22h56

Envoyé par melka one

sinon tu a essayé avec les modifs

évidemment... et je n'ai pas la moindre infobulle qui apparaît.

**melka one** · 29/11/2016, 11h06

dans le poste ou j'ai mis le code il manquait une partie j'ai mal fait le copié collé j'ai modifié le poste retente car l' infobulle s'affiche bien.

**F@bien.fd** · 29/11/2016, 14h17

Envoyé par melka one

jour
c'est moche tous ca

j'ai pas bien compris ce que tu cherche mais j'ai fait un peut le ménage

non c'est pas moche... ton code ne fonctionne pas mais en voici un qui fonctionne parfaitement avec un script et le css dans me head et un seul type d'infobulle...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<title>Info Bulle Javascript</title>
 
<style type="text/css" media="all">
 
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
 
.infobulle{
	position: absolute;	
	visibility : hidden;
	border: 2px solid red;  
	padding: 4px;
	font-family: Arial, Verdana;
	font-size: 12px;
	color : navy;
	background-color: #FFCC66; 
	opacity: 0.85;
}
 
 
</style>
<script type="text/javascript">
                                
                                function GetId(id)
                                {
                                return document.getElementById(id);
                                }
 
                                
                                function move(e) {
                                  
                                    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
                                    GetId("curseur").style.left=e.pageX + 5+"px";
                                    GetId("curseur").style.top=e.pageY + 10+"px";
                                    }
                                    else { // Modif proposÃ© par TeDeum, merci Ã* lui
                                    if(document.documentElement.clientWidth>0) {
                                        GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
                                        GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
                                    }
                                    else {
                                        GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
                                        GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
                                    }
                                    }
                                  }
                                
                                
                                function montre(text) {
                                 
                                  GetId("curseur").style.visibility="visible"; // Si il est cachÃ© (la verif n'est qu'une securitÃ©) on le rend visible.
                                  GetId("curseur").innerHTML = text; // Cette fonction est a amÃ©liorer, il parait qu'elle n'est pas valide (mais elle marche)
                        
                                }
                                function cache() {
                                
                                GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
                                i=false;
                        
                                }
                                document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
                                
</script>
</head>
<body>
 
<div id="curseur" class="infobulle"></div>
 
<h1>Infobulle Javascript personnalisable</h1>
 
<p>
<a href="#" >
<img src="Une image test.gif" alt="Une image test" 		 
onmouseover="montre('&nbsp;... Premi&egrave;re infobulle.');"
onmouseout="cache();"></a>
<br><br><br>
</p>
 
<p><img src="Une image test.png" alt="Une image test" 			 
onmouseover="montre('&nbsp;... Deuxi&egrave;me infobulle.');"
onmouseout="cache();">
<br><br><br>
</p>
 
<p><img src="Une image test.png" alt="Une image test" 			 
onmouseover="montre('&nbsp;Troisi&egrave;me infobulle.');"
onmouseout="cache();">
<br><br><br>
</p>
 
<p><img src="Une image test.png" alt="Une image test" 			 
onmouseover="montre('&nbsp;Quatri&egrave;me infobulle.');"
onmouseout="cache();">
<br><br><br>
</p>
 
 
<h3><a href="#" style="textDecoration:none; font-size:13px; font-weight:bold; color:#00ff00" 
onmouseover="this.style.color='#f7c80d'; this.style.textDecoration='none'; montre('&nbsp;Cinqui&egrave;me infobulle.')"
onmouseout="this.style.color='#00ff00'; cache()"><span style="textDecoration:none"> utilisation du SetUp</span>	</a></h3>
 
<p> 
<br><br>
<br><br><br>
</p>
 
 
</body>
</html>

**F@bien.fd** · 29/11/2016, 14h35

Tout d'abord je suis revenu sur le paramètre display: block

Code :

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

1
2
/*    display: block;   */
  visibility : hidden;

en effet lors du lancement de la page apparaît une mini infobulle avec les contours, le background-color et le padding de la bulle sans le texte évidemment, cela disparaît au premier mouvement de souris sur un lien, phénomène qui ne se passe pas avec visibility : hidden...

Envoyé par Watilin

Je te propose deux approches.

A. Tu crées une variable globale bulleVisible qui sera mise à jour par montre et cache, et tu utilises cette variable dans la fonction move pour accéder à la bonne infobulle.

je suis très tenté par celle-ci car la deuxième me paraît trop lourde et trop gourmande.
Je vais essayer de récupérer des données mais je ne pense pas que cela vienne de là. En effet suivant tes conseils, j'ai fait tourner la page sous Firefox et je ne sais pas comment j'y suis arrivé mais j'ai réussi à obtenir lors d'un test les paramètres positions de la souris, et au cours du teste rien ne variait pratiquement...

**F@bien.fd** · 29/11/2016, 17h04

Envoyé par melka one

dans le poste ou j'ai mis le code il manquait une partie j'ai mal fait le copié collé j'ai modifié le poste retente car l' infobulle s'affiche bien.

Tout d'abord Melka, bravo pour ton retour, "t'es au top mon pote..."

ça correspond presque totalement à mes souhaits, ensuite un jeu d'enfant de répartir tout cela en JS, CSS et html

maintenant je comprends d'un part en partie pourquoi je plantais, tout d'abord je ne passais que deux paramètres sur les trois nécessaires à la fonction montreJ'ai confondu chaînes et variables. J'ai mis des guillemets autour de curseur1 et les autres variables alors qu'initialement je m'en étais abstenu, en effet, j'ai par la suite cru comprendre que c'était une chaîne que la fonction getElementById attendait.
Donc voilà le code que j'avais passé

Code :

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

1
2
<a onmouseover="montre('curseur1', '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache('curseur1')">utilisation du SetUp</a>

au lieu du nécessaire

Code :

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

1
2
<a onmouseover="montre(event, curseur1 , '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur1)">utilisation du SetUp</a>

Maintenant questions importantes...
1- Pourquoi n'est-on pas tenu de vérifier la nature du navigateur ? Ce qui allège effectivement considérablement le code. Est-ce que c'est parce que l'on a adopté le mode Strict et non Transitionnal ?
2- Pourquoi ignore-t-on l'évènement onmousemove et n'a-t-on donc pas besoin d'une fonction move() ?
3- Elle me semble nécessaire pour que la bulle suive le déplacement de la souris sur le lien non ? Dans ce cas comment puis-je retrouver cette possibilité que j'avais avec mon format de bulle unique ?

Encore merci et bravo.

Infobulles multiples à sélectionner

JavaScript

Discussions similaires

Partager

Partager