Problème avec OnMouseOver sur les bordures d'une table

Bonjour,

J'ai une table qui au survol de celle-ci affiche une texte et au non-survol ne l'affcihe plus.
Voici l'entete de la table :<table border="0" cellpadding="0" cellspacing="0" width="150" onmouseover="javascript:ShowCadre(1, true)" onMouseOut="javascript:ShowCadre(1, false)">

Mais le probleme c'est qu'a chaque fois que je passe sur une bordure du tableau le OnMouseOver n'est plus pris en compte pendant un dixième de seconde ce qui me fait clignoter mon texte.
Cela donne un effet désagreable a mon affichage.

Ce problème n'apparait qu'avec IE et fonctionne parfaitement avec FireFox

Quelqu'un peut-il m'aider ??

Merci d'avance

Bonjour,

    on peut voir un peu plus de choses ?
    un bout de tableau, le texte affiché, la fonction ShowCadre...
    puisque border=0 ==> pas de bordure normalement ? si ?

---

---

Non il n'y a pas de bordure mais a chaque fois que l'on passe la souris il y est censé y avoir une bordure le OnMouseOver foire !

Je veut bien mettre plus de code mais j'ai une table des plus simple et juste un texte qui s'affiche au survol de la souris.

Je comprend pas bien pk IE reagit ainsi !!

Bonjour

IE réagit ainsi car il considère que la bordure du cadre ne fait pas partie du cadre. Tu verra encore beaucoup de différences de ce type entre IE et les autres navigateurs (sur les div, sur le body, etc ...).
Solution1 : interdire IE.
solution2, si la solution1 n'est pas applicable : "Retarder" l'effacement :
..... onMouseOut="javascript:setTimeout(function(){ShowCadre(1, false)}, 100)">
100 correspond à 1/10eme de seconde

Cordialement
Roro webDev

J'y ai pensé mais élas sa fait la meme chose !

Merci qd même c'est gentil !

oh... moi c'était uniquement pour voir comment cela se faisait.
car sur un exemple ( ci-dessous ) aucun "clignotement" !

<script type="text/javascript">
function ShowCadre(euh)
{
    var d=document.getElementById("txt");
    if ( euh )    d.style.display="inline";
    else          d.style.display="none";
}
</script>
<table border="0" cellpadding="0" cellspacing="0" width="150"
        onmouseover="ShowCadre(true);"
        onMouseOut="ShowCadre(false);">
    <tr><td>exemple</td></tr>
    <tr><td>exemple</td></tr>
    <tr><td>exemple</td></tr>
</table>
<div id="txt"
    style="display:none">message</div>

tu me diras que le div est affiché là où est le curseur ?
ou je ne sais quoi ... j'aimerais voir ce qui provoque, c'est tout,
sinon comment résoudre ?

la proposition de Roro est peut-être à creuser ( je parle du délai
    sur le oumouseout, pas d'interdire IE, ce qui est ridicule !
    ou alors tu lui fourniras les adresses des 80% de tes utilisateurs
    pour qu'il les persuade d'abandonner IE, mais il va probablement
     avoir du mal... déjà avec moi... ) et là aussi j'aimerais voir ce
    que tu fais.

---

---

function ShowCadre (Num, Aff) {
                var Taille;
               
                switch (Num) {
                    case 1:
                        Taille = 110;
                    break;
                    case 2:
                        Taille = 110;
                    break;
                    case 3:
                        Taille = 105;
                    break;
                }
               
                if (Aff == true) {
                    document.getElementById('G' + Num).height = Taille;
                    document.getElementById('D' + Num).height = Taille;
                    document.getElementById('Cadre' + Num).style.display='';
                } else {
                    document.getElementById('Cadre' + Num).style.display='none';
                    document.getElementById('G' + Num).height = '24';
                    document.getElementById('D' + Num).height = '24';
                }
            }


<table border="0" cellpadding="0" cellspacing="0" width="150" onmouseover="javascript:ShowCadre(2, true);" onMouseOut="javascript:ShowCadre(2, false);">
                                    <tr valign="bottom"><td colspan="3" width="150" height="96"><img border="0" src="PICS/Accueil/Accueil_A6.jpg"></td></tr>
                                    <tr valign="top">
                                        <td width="10"><img height="24" width="10" border="0" src="PICS/Accueil/Accueil_A1.jpg" id="G2"></td>
                                        <td width="130" align="Center" valign="top">
                                            <font face="Verdana" color=#cc6600 Size="1">
                                                <b>
                                                    En 1 Clic !
                                                </b>
                                            </font>                                           
                                            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="Cadre2" style="display:none;">
                                                <tr><td height="20"></td></tr>
                                                <tr><td><img border="0" src="pics/tri-b.gif"><a href="pNouveautes.asp" class="liste"><font face="Arial" color="red" size="1">&nbsp;Nouveautés</font></a></td></tr>                                                             
                                            </table>
                                        </td>
                                        <td width="10"><img height="24" width="10" border="0" src="PICS/Accueil/Accueil_A2.jpg" id="D2"></td>
                                    </tr>
                                    <tr><td colspan="3" width="150" height="13"><img border="0" src="PICS/Accueil/Accueil_A3.jpg"></td></tr>
                                </table>


Voila exactement ce que j'ai mis !
J'espere que vous vous y retrouverez !

Bonjour

C'est vrai que la solution 2, je ne l'avais pas testée. Je viens d'essayer ceci :
<SCRIPT LANGUAGE="JavaScript">
<!--
function ShowCadre(param)
    {
    if (param)
        document.getElementById("d1").style.visibility="visible";
    else
        document.getElementById("d1").style.visibility="hidden";
    }
//-->
</SCRIPT>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="150" onmouseover="javascript:ShowCadre(true)" onMouseOut="javascript:ShowCadre(false)">
<tr>
    <td>essais</td>
    <td>essais</td>
    <td>essais</td>
    <td>essais</td>
</tr>
<tr>
    <td>essais</td>
    <td>essais</td>
    <td>essais</td>
    <td>essais</td>
</tr>
</table>
<div id="d1" style="border : solid 1px; background-color : black; color : red">Texte de l'info à afficher ou non</div>

Je n'ai aucun des problèmes enoncés. Peut-être manquet-il qqch ?

(Pour la solution1, j'ai pas trop le temps !)

Cordialement
Roro webDev

Bonjour

Ah ! on s'est croisé.
Avec ton code, je ne rencontre pas non plus le problème. ni sur IE7, ni FF2

Cordialement
Roro webDev

désolé... tel quel : aucun clignotement...
    en local, IE7, windows XP SP2, sans les images...
j'ai déjà eu des soucis ( avec tous les navigateurs ! et j'avais du
    remplacer onmouseover par onmousemove, rien à voir donc )

---

---