affichage au passage de la souris

**kaking** · 13/11/2008, 15h18

bonjour tous le monde

bon bah voila, j'ai un tableau et je voudrais que quand on passe la souris sur la cellule, hop! un petit texte apparaisse, comme pour les balises alt des images....

j'ai donc fais ceci

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<table border="1"><tr><td onmouseover="<?php echo 'Mon texte ';?>"></td></tr></table>

mais ca marche pas, pourquoi siouplais?...faut faire ca en js ?

merci!

**E.Bzz** · 13/11/2008, 15h31

Bonjour,

Envoy� par kaking

faut faire ca en js ?

si tu n'as pas post� la m�me question dans tous les forum de DVP, c'est que tu as d�j� une partie de la r�ponse

A+

**kaking** · 13/11/2008, 15h50

merci bien, mais en fait le code que tu me donnes, si je fais ca

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
<table border="1"><tr><td id="bulle">youhou</td><td>yahaaaaa</td></tr></table><script type="text/javascript">
    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=="INPUT" ? this.type : "";
        bal2=document.createTextNode("Balise \"" + this.tagName + " " + typ +
			"\"." + " (" + tags[this.tagName] + ") ");
 
        bal.appendChild(bal2);
        bulle.appendChild(bal);
        //gestion des liens
        if(this.tagName=="A"){
            lien=document.createElement('div');
            lien.style.fontWeight=100;
            lien.style.backgroundColor="orange";
            lien2=document.createTextNode(" Adresse: \"" + this.href + "\".");
            lien.appendChild(lien2);
            bulle.appendChild(lien)
        };
        //gestion des images
        if(this.tagName=="IMG"){
            im=document.createElement('div');
            im.style.fontWeight=100;
            im.style.backgroundColor="yellow";
            im2=document.createTextNode("Adresse: \"" + this.src + "\".");
            im.appendChild(im2);
            bulle.appendChild(im)
        };
    }
    //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
        };
        if(lien){
            bulle.removeChild(lien);
            lien=false
        };
        if(im){
            bulle.removeChild(im);
            im=false
        };
    }
    // ajoutez ou enlevez les éléments que vous voulez dans les tableaux suivants
    var tagtype=new Array('IMG','DIV','P','FORM','H1','TABLE','TD','A','SPAN',
		'INPUT','TEXTAREA','HR','H2','SELECT');
    var expl=new Array('image','contenant de type bloc','paragraphe','formulaire',
		'titre n°1','tableau','cellule de tableau','lien','contenant intra-ligne',
		'contrôle de formulaire','zone de texte multiligne','barre horizontale',
		'titre n°2','liste d\'options');
    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].onmouseover=on;
            document.getElementsByTagName(tagtype[i])[j].onmouseout=off;
        };
    }
    document.body.onclick=off;
</script>

he bah ca INSERE dans ma case <td> un texte.

Or je veux pas que ca insere un texte dans ma cellule, je veux que ca affiche un texte qui suit ma souris quand celle ci passe dessus. actuellement, ca deforme le tableau au passage de la souris.

de plus, quand ma souris n'est plus sur la case <td id='bulle'>, he bah la cellule disparait.... ce que je veux pas du tout!