Discussion :

[caroletexier]

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 :

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
<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>

[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.

[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" 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 :

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
//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 = '';
}

[SpaceFrog]

document.write

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

[E.Bzz]

Bonjour,

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 :

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

<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+