infobulle connectée à base de données

Version imprimable

Bonjour,

Sur une carte de france, je veux afficher une infobulle par département dans laquelle s'affiche le CA de l'année.
J'y arrive mais le problème avec ma méthode est que je dois faire une requête pour chaque département. C'est un peu lourd ;)
Comment faire pour avoir une seule requete qui reconnaitrais la valeur du numéro de département.
Merci d'avance

Mon code :

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
<script type="text/javascript" src="script_infos-bulle.js"></script>
 
 
<p>
<%curyear= year(date)%>
<%prevyear= year(date)-1%>
 
<% total1 = "SELECT sum(res1), sum(res2) FROM (SELECT sum(c.ca) AS res1, count(distinct(b.codetiers)) AS res2 FROM APISOFT_DOS_DELAHOUSSE_SA.GEST_VUE_STATBASE_FC c,  APISOFT_DOS_DELAHOUSSE_SA.ENTETEFACTURE B, APISOFT_DOS_DELAHOUSSE_SA.article e where e.code = c.codearticle and b.codedocutil = c.codedocutil and extract(year from c.datedoc)="&curyear&" and b.pays='FR' and b.cp like '62%')"%>
<%Set total1 = oCon.execute(total1)%>
<%resultat = "Pas de Calais - 62" &"<BR><BR>"& "Nb clients : " &total1(1)& "<BR>" &"CA : " & replace(formatnumber(total1(0),2,,,-1),"'"," ")&" €"& "<BR>"  %>
 
 
<% total2 = "SELECT sum(res1), sum(res2) FROM (SELECT sum(c.ca) AS res1, count(distinct(b.codetiers)) AS res2 FROM APISOFT_DOS_DELAHOUSSE_SA.GEST_VUE_STATBASE_FC c,  APISOFT_DOS_DELAHOUSSE_SA.ENTETEFACTURE B, APISOFT_DOS_DELAHOUSSE_SA.article e where e.code = c.codearticle and b.codedocutil = c.codedocutil and extract(year from c.datedoc)="&curyear&" and b.pays='FR' and b.cp like '80%')"%>
<%Set total2 = oCon.execute(total2)%>
<%resultat2 = "- 80" &"<BR><BR>"& "Nb clients : " &total2(1)& "<BR>" &"CA : " & replace(formatnumber(total2(0),2,,,-1),"'"," ")&" €"& "<BR>"  %>
 
 
<map name="FPMap0">
 
<area  onmouseover="afficher_bulle('<%=resultat%>', '#ffffff', event);" onmouseout="masquer_bulle();" shape="polygon" coords="507, 93, 504, 88, 505, 40, 541, 21, 551, 49, 556, 54, 571, 64, 584, 63, 590, 63, 588, 72, 598, 77, 605, 81, 603, 90, 613, 104, 608, 126, 589, 123, 582, 117, 568, 117, 561, 120, 561, 108, 549, 108, 542, 107, 525, 95, 511, 92">
 
<area onmouseover="afficher_bulle('<%=resultat2%>', '#ffffff', event);" onmouseout="masquer_bulle();"  shape="polygon" coords="502, 94, 493, 122, 508, 140, 518, 161, 543, 167, 570, 173, 581, 178, 597, 164, 609, 164, 608, 151, 615, 134, 609, 125, 571, 121, 557, 121, 554, 114, 536, 107, 516, 95, 509, 96">
 
</map>
 
<img border="0" src="CarteDeFrance%20OK.JPG" width="994" height="1390" usemap="#FPMap0"></p>

26/05/2009, 08h55
SpaceFrog

il suffit de passer le numéro du département dasn la fonction afficherbulle
puis avec l'ajax tu passes le numéro du département coté serveur et tu concatènes la requete coté php avec le numéro du dératement dasn le WHERE de la requete.

Merci de ta réponse.
Mais ce que je n'arrive pas à faire c'est : en passant la souris sur le département, ça passe le numéro du département dans la fonction "afficher_bulle" et ça renvoie l'info pour que la requête ASP aille cherche les données correspondantes au numéro du département. Je sais pas si je suis claire ;)

Voila le code de la fonction "afficher_bulle" :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
//Définition de variables en fonction du navigateur
var ie = (document.all)? true:false;
var ns4 = (document.layers)? true:false;
var ns6 = (document.getElementById)? true:false;
 
//Incrustation du div "bulle" (display: none = non affiché)
//Vous pouvez librement modifier le style de bordure de la bulle
if ((ns6) || (ie)) {
   document.write('<div id="bulle" style="position:absolute; top: 0; left: 0; border: 2px solid #111; padding: 5px; display: none;font-family: verdana;font-size:10.0pt; "></div>');
} else if (ns4) {
   document.write('<layer id="bulle" top=0 left=0></layer>');
}
 
if(ns6) {
 var bulle = document.getElementById('bulle');
}
else if(ie) {
 var bulle = document.all['bulle'];
}
else {
 var bulle = document.layers['bulle']; 
}
 
var bulleStyle = bulle.style;
 
//Fonction d'affichage de la bulle
function afficher_bulle(texte, couleur, event) {
 
 //Lignes utiles si vous imbriquez des éléments devant supporter des bulles
 if(ie) {
  window.event.cancelBubble = true;
 }
 else {
  event.stopPropagation();
 }
 
 bulle.innerHTML = texte;
 bulleStyle.backgroundColor = couleur;
 
 //On suit les mouvements de la souris
 if(ie) {
  bulle_mouseMove();
 }
 else {
  bulle_mouseMove(Event);
 }
 
 document.onmousemove = bulle_mouseMove;
 bulleStyle.display = 'block';
 
}
 
//Fonction de positionnement de la bulle en fonction des mouvements du curseur
function bulle_mouseMove(e) {
 
 if(ie) {
  //Prend en compte le scroll de la page
  if(document.documentElement.clientWidth>0) {
   bulle_x = event.x + document.documentElement.scrollLeft;
   bulle_y = event.y + document.documentElement.scrollTop;
  }
  else {
   bulle_x = event.x + document.body.scrollLeft;
   bulle_y = event.y + document.body.scrollTop;
  }
 }
 else {
 
  bulle_x = e.pageX;
  bulle_y = e.pageY;
 }
 
 if(!isNaN(bulle_x) && !isNaN(bulle_y)) {
  bulle_x += 5;
  bulle_y -= 25;
 
  bulleStyle.left = bulle_x + 'px';
  bulleStyle.top = bulle_y + 'px';
 }
}
 
//Fonction qui fait disparaître la bulle
function masquer_bulle() {
 document.onmousemove = null;
 bulleStyle.display = 'none';
 
}
 
//Fonctions qui augmente le z-index (indice de profondeur) de la bulle
function up_zindex_bulle() {
 bulleStyle.zIndex = 200;
}
//Réinitialise le z-index
function raz_zindex_bulle() {
 bulleStyle.zIndex = '';
}

26/05/2009, 15h22
SpaceFrog

document.write :nono:

mets un div dans ta page et donne lui un id, mets le en display none

sur le onmouseover lance une fonction js qui lance un ajax et recupère le contenu généré coté serveur suite à la requete
à reception de la reponse ajax attribue la réponse en innerHTML de ton, div puis modifie le display du div
26/05/2009, 15h44
E.Bzz

Bonjour,

Citation:

Envoyé par caroletexier

Merci de ta réponse.
Mais ce que je n'arrive pas à faire c'est : en passant la souris sur le département, ça passe le numéro du département dans la fonction "afficher_bulle"

Ici tu passes le "resultat" à la fonction.

Code:

<area onmouseover="afficher_bulle('<%=resultat%>', '#ffffff', event);" ....

Il te suffit de le remplacer par le n° de département, pour mettre en place la solution Ajax proposée par SpaceFrog ...

A+