Discussion :

[kaking]

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]

Bonjour,

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]

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!

[E.Bzz]

Pas de bol !

En plus du code, il n'y avait pourtant qu'une seule phrase à lire

A+

[kaking]

bon bah merci je trouverai aut'chose

[E.Bzz]

Il suffit d'insérer ce code en bas de page.

[kaking]