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

Signaler
Messages postés
126
Date d'inscription
lundi 18 septembre 2006
Statut
Membre
Dernière intervention
7 décembre 2009
-
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007
-
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 :

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
<table border="0" cellpadding="0" cellspacing="0" width="150">

12 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
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 ?

<hr />


Cordialement            Bul        
Messages postés
126
Date d'inscription
lundi 18 septembre 2006
Statut
Membre
Dernière intervention
7 décembre 2009

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 !!
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

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
Messages postés
126
Date d'inscription
lundi 18 septembre 2006
Statut
Membre
Dernière intervention
7 décembre 2009

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

Merci qd même c'est gentil !
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
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>
    ----
exemple,
    ----
exemple,
    ----
exemple

message

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.

<hr />


Cordialement            Bul        
Messages postés
126
Date d'inscription
lundi 18 septembre 2006
Statut
Membre
Dernière intervention
7 décembre 2009

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';
                }
            }

                                    ----
,
                                    ----

                                        ,
                                                                                   
                                               
                                                    En 1 Clic !
                                               
                                                                                       
                                            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="Cadre2" style="display:none;">
                                                ----, </td>
                                                ----
&nbsp;Nouveautés,                                                              
                                           

                                        </td>
                                        <td width="10"></td>
                                    </tr>
                                    <tr><td colspan="3" width="150" height="13"></td></tr>
                                </table>

Voila exactement ce que j'ai mis !
J'espere que vous vous y retrouverez !
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

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>

    essais,
    essais,
    essais,
    essais,

----

    essais,
    essais,
    essais,
    essais

Texte de l'info à afficher ou non

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
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
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 )
<hr />


Cordialement            Bul        
Messages postés
126
Date d'inscription
lundi 18 septembre 2006
Statut
Membre
Dernière intervention
7 décembre 2009

Moi j'ai IE6

Ca doit etre ça, mais il faut que ça marche sur tout les naviguateur !
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
franchement, aucune raison que ça ne marche pas avec IE6.
rien que de très classique ici. On sait tout ? je doute.
tant qu'à marcher avec tous les navigateurs... un leurre.
même si, encore une fois, avec ce que tu as fourni... pas de raisons.
<hr />


Cordialement            Bul        
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




Personnellement, je ne serai pas étonné que cela vienne de IE6, corrigé dans la version 7 ( ???). Si quelqu'un l'a encore, il peut peut-etre vérifier ? d'avance merci aux contributeurs.

J'ai également connu des problèmes similaires, mais impossible de me rappeler comment j'avais résolu çà.

Cordialement
Roro webDev