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 requête qui reconnaitrait la valeur du numéro de départment.
C'est-à-dire qu'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 ;)
Merci d'avance
Mon code :
<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>
Et la fonction affiche_bulle dans script_infos-bulle.js :
//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>');
}elseif(ns4){
document.write('<layer id="bulle" top=0 left=0></layer>');
}
if(ns6){
var bulle = document.getElementById('bulle');
}
elseif(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 = '';
}