Discussion :

[AAlain]

Bonjour,

Je cherche à développer une carte de France interactive où lorsque l'on clique sur un département une sorte d'infobulle avec des liens qui s'affiche à coté de la souris.

Apres des recherches, j'ai trouvé un bout de code que j'ai éssayer d'adapter à ma situation.

Le problème est le suivant :
Le texte de l'infobulle précédente s'ajoute à celui de l'infobulle actuelle :



Voici le javascript associée :

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
 
    document.write('<div style="position:absolute;display:none" id="bulle"></div>')
    var bal=false;
    var lien=false;
    var im=false;
    var bulle=document.getElementById('bulle');
    // affichage de la bulle
    function on(e){
        if(!e){
            window.event.cancelBubble=true
        }
        else{
            e.stopPropagation()
        };
        //position de la bulle
        ns= (navigator.appName.search("Nestcape")!=-1) ? window.pageXOffset : 0;
        ns2= (navigator.appName.search("Nestcape")!=-1) ? window.pageYOffset : 0;
        posx= (!e) ? event.clientX+document.documentElement.scrollLeft : e.pageX+ns;
        posy= (!e) ? event.clientY+document.documentElement.scrollTop : e.pageY+ns2;
        hori=(posx > (screen.availWidth - 200)) ? -250 : 0;
        bulle.style.left= posx+hori+"px";
        bulle.style.top= posy+"px";
        bulle.style.display='block';
        //gestion du type d'élément
        bal=document.createElement('div');
        bal.style.fontWeight=100;
        bal.style.backgroundColor="pink";
        typ=this.tagName;
		bal2=false;
        bal2=document.createTextNode("Balise \"" + this.tagName + " " + typ + "\"." + " (" + tags[this.tagName] + ") ");
        bal.appendChild(bal2);
        bulle.appendChild(bal);
    }
    //masquage de la bulle
    function off(e){
        if(!e){
            window.event.cancelBubble=true
        }
        else{
            e.stopPropagation()
        };
        bulle.style.display='none';
        if(bal){
            bulle.removeChild(bal);
            bal=false
        };
    }
    // ajoutez ou enlevez les éléments que vous voulez dans les tableaux suivants
    var tagtype=new Array('MAP');
    var expl=new Array('cellule de tableau');
    var tags=new Array();
    for(i=0;i != tagtype.length;i++){
        tags[tagtype[i]]=expl[i]
    }
    for(i=0;i != tagtype.length;i++){
        for(j=0;j != document.getElementsByTagName(tagtype[i]).length;j++){
            document.getElementsByTagName(tagtype[i])[j].onclick=on;
            //document.getElementsByTagName(tagtype[i])[j].onmouseout=off;
        };
    }
    document.body.onclick=off;

Ce que j'aimerais c'est qu'il n'y ait qu'une ligne dans une infobulle.
J'espère avoir été assez clair.

Merci

[malbaladejo]

Ajout bulle.innerHTML = "" :

Code :

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

1
2
3
 
bulle.innerHTML = "";
bulle.style.display='block';