Infobulles multiples à sélectionner
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:
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:
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:
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:
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:
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(' 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(' ... 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(' ... 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(' 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(' 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(' 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. :)
