Bonjour/bonsoir.
Mon problème : J'ai des infobulles à mettre sur une image mapée.
Code de l'image :
code javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
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.
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 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.
Merci d'avance.
J'espère avoir été clair.
Partager