Infobulles multiples à sélectionner

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

Synthèse de tout ce travail des différents participants...
Donc voici une version ~~quasi~~ parfaite de ce que je souhaitais ~~hormis que la bulle ne suis pas le curseur~~.

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
 
#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;
}
 
#curseur4 {
  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
				function GetId(id)
				{
				return document.getElementById(id);
				}
 
				function montre(e,id,text) {							
				//  if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
				    id.style.left=e.pageX + 5 +"px";
				    id.style.top=e.pageY + 25 +"px";					
				//    }						
					id.style.display = 'block'; 
					id.innerHTML = text; 				
				}
 
				function cache(id) {				
				id.style.display = 'none'; 	
				}

test.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
70
71
72
<!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>
<div class="infobulle" id="curseur4"> </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 
onmousemove="montre(event, curseur2 , '&nbsp;On parle du <b>SetUp</b>.')"
onmouseout="cache(curseur2)">utilisation du SetUp</a>	
<br>
</p>
 
<p>
<a href="#">
<img src="supergeek.png" alt="Une image test" 		 
onmousemove="montre(event, curseur3,  '&nbsp;... Cela vous donnera la solution qui est <br>la suivante.<br>');"
onmouseout="cache(curseur3);"></a>
<br><br><br></p>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmousemove="montre(event, curseur4,  '&nbsp;... Vous savez compter dans les cas suivants<br>');"
onmouseout="cache(curseur4);"></a>
<br><br><br></p>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmousemove="montre(event, curseur2,  '&nbsp;Vous parlez de trop.<br>');"
onmouseout="cache(curseur2);"></a>
<br><br><br></p>
 
<p>
<a href="#">
<img src="supergeek.png" alt="Une image test" 			 
onmousemove="montre(event, curseur3,  '&nbsp;Trop <b>fatiguant</b> pour gagner');"
onmouseout="cache(curseur3);"></a>
<br><br><br></p>
 
 
<h3><a href="#" style="textDecoration:none; font-size:13px; font-weight:bold; color:#00ff00"
onmousemove="this.style.color='#f7c80d'; this.style.textDecoration='none'; montre(event, curseur1,  '&nbsp;Cela sera presque possible.')"
onmouseout="this.style.color='#00ff00'; cache(curseur1)"><span style="textDecoration:none"> utilisation du SetUp</span></a></h3>
<p><br><br><br></p>	    
 
</body>
</html>

~~Reste à ce que l'infobulle suive le mouvement de la souris lorsqu'elle se déplace sur le lien~~.

**Watilin** · 29/11/2016, 18h50

L’équivalent de visibility: hidden ce n’est pas display: block, c’est display: none…

On n’a plus besoin de prévoir un cas spécial pour IE car Microsoft s’est mis à la page, les versions actuelles de son navigateur se comportent comme les autres. De manière générale aujourd’hui, si tu trouves du code qui vérifie le navigateur, il y a de grandes chances que ce soit du code obsolète, ou alors c’est pour un usage très spécifique. Ou alors c’est que tu es en train d’examiner le code d’un framework, comme jQuery par exemple.

**melka one** · 29/11/2016, 21h24

pour le suivi il faut mettre onmousemove a la place de onmouseover

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

Envoyé par melka one

pour le suivi il faut mettre onmousemove a la place de onmouseover

merci, en plus c'est ce que j'utilise régulièrement en Pro objet...

Cela aurait dû être une évidence pour moi...
J'édite la version définitive pour ceux que ça intéresse.

Merci beaucoup à Watilin et Melka one pour toute l'aide que vous m'avez apporté.

**NoSmoking** · 03/12/2016, 16h27

Bonjour,

pour le suivi il faut mettre onmousemove a la place de onmouseover

je ne suis pas fan de cette solution pour la raison essentielle qu'à chaque mouvement on re-exécute toutes les instructions de la fonction y compris celle qu'il ne devrait plus l'être.

La fonction sur le mousemove a pour rôle unique de repositionner l'élément et non de le redéfinir à chaque fois.

Le principe devrait être le suivant

mouseover : création et initialisation
mousemove : déplacement de l'élément
mouseout : restauration du contexte

Les façons d'y arriver sont nombreuses mais placer le code dans le HTML me semble être la moins bonne.

Je rajouterai que tu n'utilises pas ta function GetId(id) en faisant un appel direct à id.style... on sait que cela fonctionne mais ce n'est pas une bonne façon de procéder.

**melka one** · 03/12/2016, 18h14

si c'est pour un site ce n'est pas grave ca reste valide

personnellement j’aurais fait comme ceci

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
<!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;
}
 
.curseur1, .curseur2, .curseur3 {
  position: absolute;
  display: none;
  padding: 4px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  opacity: 0.85;
}
 
</style>
 
<script>
 
        var obj={
                "balise1": {
 
                        "classe": "curseur2",
                        "texte": "&nbsp;On parle du <b>SetUp</b>."
                },
 
                "balise2": {
 
                        "classe": "curseur1",
                        "texte": "&nbsp;... Cela vous donnera la solution qui est <br>la suivante.<br>"
                },
 
                "balise3": {
 
                        "classe":"curseur3 ",
                        "texte": "&nbsp;... Vous savez compter dans les cas suivants<br>"
                },
 
                "balise4": {
 
                        "classe": "curseur1",
                        "texte": "&nbsp;Vous parlez de trop.<br>"
                },
 
                "balise5": {
 
                        "classe": "curseur2",
                        "texte": "&nbsp;Trop <b>fatiguant</b> pour gagner"
        },
 
                "balise6": {
 
                        "classe": "curseur3",
                        "texte": "&nbsp;Cela sera presque possible."
                }
}
 
 function montre(e) {
 
        var nom_obj=e.currentTarget.getAttribute("data-bulle")
        
        var elem=document.getElementById("infobulle")
 
        elem.className=obj[nom_obj].classe
        elem.style.left=e.pageX + 5+"px";
        elem.style.top=e.pageY + 6+"px";
        elem.style.display = 'block'; 
        elem.innerHTML = obj[nom_obj].texte; 
 
        }
        
function suivre(e) {
 
        var elem=document.getElementById("infobulle");
        elem.style.left=e.pageX + 5+"px";
        elem.style.top=e.pageY + 6+"px";
 
        }
 
function cache(e) {
 
        var elem=document.getElementById("infobulle");
        elem.style.display = 'none'; 
 
        }
        
addEventListener("load",function(){
 
        var all=document.getElementsByTagName("*")
 
        for(var i=0;i<all.length-2;i++){
        
                if(all[i].hasAttribute("data-bulle")){
                
                all[i].onmouseover=montre
                all[i].onmousemove=suivre
                all[i].onmouseout=cache
                }
        }
}, false);
 
</script>
 
</head>
<body>
 
<h1>Infobulle Javascript configurable</h1>
 
<div class="infobulle" id="infobulle"> </div>
 
<p>
<br><br><br>
</p>
 
<p>
<a data-bulle="balise1">utilisation du SetUp</a>	
<br>
 
<a data-bulle="balise1">utilisation du SetUp</a>	
<br>
 
<a href="#">
<img src="supergeek.png" alt="Une image test" data-bulle="balise2"
></a>
<br><br><br></p>
 
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" data-bulle="balise3"></a>
<br><br><br></p>
 
<p><a href="#">
<img src="supergeek.png" alt="Une image test" data-bulle="balise4"></a>
<br><br><br></p>
 
<p>
<a href="#">
<img src="supergeek.png" alt="Une image test" data-bulle="balise5"></a>
<br><br><br></p>
 
 
<h3><a href="#" style="textDecoration:none; font-size:13px; font-weight:bold; color:#00ff00"
data-bulle="balise6"><span style="textDecoration:none"> utilisation du SetUp</span></a></h3>
<p><br><br><br></p>	  
</body>
 
</body>
</html>

par contre je reste aussi perplexe quand a cette syntaxe

id.style...

que je n'utilise pas mais sa marche et c'est mieux que Jquery ne devrait on pas l'utiliser ?

**F@bien.fd** · 05/12/2016, 23h26

Bon ben je vois que ça fait parler... et c'est plutôt bien.

Moi je reste convaincu que d'intégrer le code javascript dans les pages web alourdit considérablement les dites pages.
Pour faire court, si j'ai une dizaine de bulles différentes avec des aspects différents et une dizaine de pages, je n'imagine même pas modifier le format de l'une d'elles.
Alors que si l'on passe les codes dans un fichier externe et le css itou, rien de plus simple.

Dans chaque page on signale les différents div à utiliser avec à ne pas oublier les z-index afin de ne pas se retrouver avec des bulles en arrière plan, et il suffit de donner pour chacune d'elle le message que l'on veut faire passer y compris avec des images, etc...

Merci encore pour l'aide fournie.

**NoSmoking** · 07/12/2016, 19h28

Envoyé par melka

par contre je reste aussi perplexe quand a cette syntaxe

id.style...

que je n'utilise pas mais sa marche et c'est mieux que Jquery ne devrait on pas l'utiliser ?

je ne dirais pas qu'elle est à éviter mais qu'elle est à fuir

Il existe des risque de collision dans le code entre mélange d'objet, lorsque le navigateur interprète le code HTML, il construit le DOM. A chaque balise est associé un objet JavaScript (type HTMLElement) en faisant correspondre les propriétés avec les attributs et c'est là que cela risque de coincer.

Essaies ce simple code pour voir les effets de bords.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>...</title>
</head>
<body>
  <div id="info"><b>Info</b> : </div>
  <div id="info_2"><b>Info_2</b> : </div>
<script>
var ind = 1;
var txt = 'la page est parsée.';
function info(id, txt) {
    console.log(ind++, id);
    id.innerHTML += txt;
}
info(info, txt);     // oui mais info en paramètre c'est quoi ????
info(info_2, txt);
document.querySelector('#info').innerHTML += 'Ce message s\'affiche normalement.';</script>  
</body>
</html>

dans la fonction le traitement est différent suivant l'id passée alors qu'avec document.querySelector, par exemple, il n'y a pas de soucis.

Envoyé par F@bien.fd

Moi je reste convaincu que d'intégrer le code javascript dans les pages web alourdit considérablement les dites pages.
(...)
Alors que si l'on passe les codes dans un fichier externe et le css itou, rien de plus simple.

on n'a pas dit le contraire même si pour les exemples on ne sépare pas forcément le HTML-CSS et JS.

Il en ressort néanmoins que tu glisses dans tes balises du code qui ne devrait pas y être si on suit ton raisonnement, qui est le bon, séparation des couches.
Pour moi exit ce genre d'écriture

Code html :

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

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

qui est tout aussi difficile à maintenir

Code html :

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

<span data-infostyle="info-style-1" data-infobulle="&nbsp;On parle du <b>SetUp</b>.">utilisation du SetUp</span>

et au chargement de la page on récupère les éléments devant être traités

Code :

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

1
2
3
4
5
6
document.addEventListener('DOMContentLoaded', function() {
  var oInfos = document.querySelectorAll('[data-infobulle]');
  for( var i=0; i < oInfos.length; i +=1){
    oInfos[i].addEventListener( 'mouseover', handleMouseOver, false);
  }
});

Pour finir je dirais que le contenu d'une « infobulle » doit être succinct, court, sinon son contenu devrait faire partie intégrante de la page puisque pertinent, dans ce cas le traitement serait sensiblement différent.

**melka one** · 08/12/2016, 15h11

Il existe des risque de collision dans le code entre mélange d'objet

c'est ce que je me disait

Infobulles multiples à sélectionner

JavaScript

Discussions similaires

Partager

Partager