Area & Javascript

[Jaack]

Bonjour/bonsoir.
Mon problème : J'ai des infobulles à mettre sur une image mapée.
Code de l'image :

Code :

1
2
3
4
5
6
 
<img src="images/graphe.jpg" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="83,128,229,172" href="#" onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />ici la photo est la meme<br /></div>');" onmouseout="hideTooltip()"> 
  <area shape="rect" coords="352,76,467,165" href="#" alt="" onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />ici la photo est la meme<br /></div>');" onmouseout="hideTooltip()"/>
</map>

code javascript :

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
67
68
69
70
71
72
73
74
 
var xOffset=6
var yOffset=5
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
var laBulle
}
 
function ietruebody(){ // retourne le bon corps...
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
if(affiche){
var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
 
var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
// modifier la largeur de l'objet s'il est trop grand...
if(laBulle.offsetWidth > winwidth / 3){
laBulle.style.width = winwidth / 3
}
 
// si la largeur horizontale n'est pas assez grande pour l'info bulle
if(rightedge < laBulle.offsetWidth){
// bouge la position horizontale de sa largeur à gauche
laBulle.style.left = curX - laBulle.offsetWidth + "px"
} else {
if(curX < leftedge){
laBulle.style.left = "5px"
} else{
// la position horizontale de la souris
laBulle.style.left = curX + xOffset + "px"
}
}
 
// même chose avec la verticale
if(bottomedge < laBulle.offsetHeight){
laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
} else {
laBulle.style.top = curY + yOffset + "px"
}
}
}
function showTooltip(text) {
if (w3c||ie){
laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
laBulle.innerHTML = text; // fixe le texte dans l'infobulle
laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
affiche = true;
}
}
function hideTooltip() {
if (w3c||ie){
affiche = false
laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
laBulle.style.top = '-100000px'
laBulle.style.backgroundColor = ''
laBulle.style.width = ''
}
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Mon problème : Ici, passez la souris sur "Le prix des cigarettes" et l'infobulle est complètement décalée alors qu'elle devrait être à côté du curseur... Ca fonctionne que sous IE.

Merci d'avance.
J'espère avoir été clair.

[NoSmoking]

Bonsoir,
pas tout regarder, mais sous IE si la page est scrollée cela foire bien plus que sur FireFox et autre, j'en conclu que la récupération de la position n'est pas correcte, pour exemple tu peux faire

Code :

1
2
3
4
5
  e = e || event;
  var dE = document.documentElement,
      dB = document.body;
  var curX = e.pageX || ( event.clientX +( dE && dE.scrollLeft || dB && dB.scrollLeft || 0) -( dE.clientLeft || 0));
  var curY = e.pageY || ( event.clientY +( dE && dE.scrollTop  || dB && dB.scrollTop  || 0) -( dE.clientTop  || 0));

et ce sans passer par la fonction ietruebody

Constat, si sur FF and consort, ta page fait pile poil la largeur du conteneur le comportement est identique, plus la marge est importante plus l'écart augmente, à vérifier
l'écart = marge gauche

Voila pour un début...

[NoSmoking]

Constat, si sur FF and consort, ta page fait pile poil la largeur du conteneur le comportement est identique, plus la marge est importante plus l'écart augmente, à vérifier
l'écart = marge gauche

après avoir regardé le HTML, il faut que tu mettes

Code :

<div id="bulle"></div>

en dehors de la DIV conteneur pour qu'elle n'hérites pas des marges sous les NOT IE.

Places la avant le </body> par exemple

La remarque concernant la récupération de la position lors des scrolls reste valable pour IE...

[Jaack]

Merci beaucoup ! J'ai mis le div en dehors du conteneur.
Et pour que ça marche j'utilise ce code :

Code javascript :

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
 
var xOffset=1
var yOffset=1
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
var laBulle
}
 
function ietruebody(){ // retourne le bon corps...
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
if(affiche){
var dE = document.documentElement,
dB = document.body;
var curX = e.pageX || ( event.clientX +( dE && dE.scrollLeft || dB && dB.scrollLeft || 0) -( dE.clientLeft || 0));
var curY = e.pageY || ( event.clientY +( dE && dE.scrollTop  || dB && dB.scrollTop  || 0) -( dE.clientTop  || 0));
 
 
var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
// modifier la largeur de l'objet s'il est trop grand...
if(laBulle.offsetWidth > winwidth / 3){
laBulle.style.width = winwidth / 3
}
 
// si la largeur horizontale n'est pas assez grande pour l'info bulle
if(rightedge < laBulle.offsetWidth){
// bouge la position horizontale de sa largeur à gauche
laBulle.style.left = curX - laBulle.offsetWidth + "px"
} else {
if(curX < leftedge){
laBulle.style.left = "5px"
} else{
// la position horizontale de la souris
laBulle.style.left = curX + xOffset + "px"
}
}
 
// même chose avec la verticale
if(bottomedge < laBulle.offsetHeight){
laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
} else {
laBulle.style.top = curY + yOffset + "px"
}
}
}
function showTooltip(text) {
if (w3c||ie){
laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
laBulle.innerHTML = text; // fixe le texte dans l'infobulle
laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
affiche = true;
}
}
function hideTooltip() {
if (w3c||ie){
affiche = false
laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
laBulle.style.top = '-100000px'
laBulle.style.backgroundColor = ''
laBulle.style.width = ''
}
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Je sais pas si c'est vraiment bon parce que le Javascript c'est pas mon fort. Merci beaucoup quand même !

[NoSmoking]

rapidement vu que il manque une ligne, oubli de recopie je présumes

Code :

1
2
3
4
5
6
7
8
function deplacer(e) {
if(affiche){
  e = e ||event; // ICI et c'est VERY IMPORTANT
  var dE = document.documentElement,
  dB = document.body;
  var curX = e.pageX || ( event.clientX +( dE && dE.scrollLeft || dB && dB.scrollLeft || 0) -( dE.clientLeft || 0));
  var curY = e.pageY || ( event.clientY +( dE && dE.scrollTop  || dB && dB.scrollTop  || 0) -( dE.clientTop  || 0));
  // la suite...

pour le reste il y a des simplifications possible.