Discussion :

[F@bien.fd]

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]

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]

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

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

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

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

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

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]

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

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

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.

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.

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

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.

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 :

[Watilin]

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 :

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));
  …
}