Probleme onclick/onmouseout

Bonsoir,

je profite de ses quelques jours de congès durant les fêtes pour me remettre sur de la prog perso.

tout semble bien se dérouler à une exception près. J'ai un tableau (code ci dessous) avec entête cliquable (B,C,D,E) par un onclick, lorsque cette action est effectuée une liste de choix est proposé (div contenu dans le th) mais mon mouseout s'execute au moment même ou je vais dans l'enfant du th (le div), c'est à dire quand je vais avec la souris choisir parmis la liste proposé,or il faudrait que le mouseout ne se produise que lorsque je quitte le th.

La seule solution que j'ai trouvé fonctionnel est de remplacer le onclick par un mouseover. Mais je voudrais éviter de le remplacer.

nota : mon javascript et mon css partiront bien sûr dans des fichiers à part


Ce a été testé sous Firefox, là ou mon problème intervient, non testé pour le moment sous un autre navigateur.

<style type="text/css">
body {
    margin:0;
    padding:2px;
}
#hd, #contenu table{border-collapse: collapse;padding:0}

#hd th { text-align:left;} /*Pour bug IE*/

#hd th p
{
    text-align:center;
    margin: 0;    
}
#hd div
{
    background-color:green;
    position:absolute;
    visibility:hidden;
}
td,th
{
    border-right:green 1px solid;
    border-bottom:green 1px solid;
}

#hd div
{
    border:solid 1px black;
    border-top:none;
    text-align:left;
}

#hd div a{
    margin: 0;    
    display:block;
}
#hd div a:hover{   
    background-color:yellow;
}



</style>


<table id="hd"><colgroup><col class="t"/><col class="i"/><col class="v"/><col class="p"/><col class="q"/><col class="l"/><col class="g"/><col class="s"/></colgroup><tbody><tr id="hc"><th><p>A</p></th><th><p>B</p><div class="0"><a href="">Choix1</a><a href="">Choix2</a><a href="">Choix3</a></div></th><th><p>C</p><div class="1"><a href="">Choix1</a><a href="">Choix2</a><a href="">Choix3</a></div></th><th><p>D</p><div class="2"><a href="">Choix1</a><a href="">Choix2</a><a href="">Choix3</a></div></th><th><p>E</p><div class="3"><a href="">Choix1</a><a href="">Choix2</a></div></th><th><p>F</p></th><th><p>G</p></th><th><p>H</p></th></tr></tbody></table>
<script type="text/javascript">

window.onload = function ()
{
  initMouseEvt();  
}

var lastThIndex;
var lastdiv;

function initMouseEvt()
{
    var header = document.getElementById('hc');
    //recuperation des Th de hc
    var th = header.getElementsByTagName('th');
    
    for (var i=0;i<th.length;i++)
    {
      if (th[i].getElementsByTagName('div').length>0)
      {
        th[i].onclick = function(event){affiche(this);};
        th[i].onmouseout = function(event){cache(this);};        
      }  
    }
    
}

function affiche(el)
{
    var mydiv = el.getElementsByTagName("div")[0];
    if (lastdiv != undefined)
    {
        lastdiv.style.visibility ='hidden';
    }
    mydiv.style.visibility ='visible'
    lastdiv = mydiv;    
}

function cache(el)
{    
    var mydiv = el.getElementsByTagName("div")[0];
    if (mydiv.style.visibility =='visible')
    {
        mydiv.style.visibility ='hidden';
        lastdiv = undefined;    
    }
}
</script>

Merci de votre aide,
Je vous souhaite à tous de bonnes fêtes ![/i][/i][/i]
Modifié par conan76 (28 Dec 2007 - 19:17)