Affichage div avec temporisation

[poupilou]

Salut à tous,

J'ai une liste de 6 menus (liens textes) qui sont placés horizontalement et lorsque je passe ma souris dessus une div s'affiche juste en dessous avec les sous-menus correspondant à ce menu.

Chaque menu (lien texte) à un id unique du type id="onglet_1", id="onglet_2", etc...

Je voudrais apporter une temporisation sur l'ouverture de ces div parce qu'il suffit de passer sur les liens pour qu'elles s'ouvrent et parfois ce n'est pas nécessaire et même gênant mais je n'ai pas trouvé la solution pour modifier mon code javascript pour apporter cette temporisation.

Voici mon code javascript :

window.onload=montre;
function montre(id) {
    var d = document.getElementById(id);
        for (var i = 0; i<=100; i++) {
            if (document.getElementById('onglet_'+i)) {document.getElementById('onglet_'+i).style.display='none';}
        }
    if (d) {d.style.display='block';}
}

Quelqu'une sait-il qu'est-ce qu'il faut ajouter/modifier à ce code javascript pour apporter cette temporisation ?

D'avance merci pour votre aide.

Bruno

 

[loubet]

bonjour,
ce code est appelé au chargement de la page. c'est inutile si les div sont dans une classe en display:none;
quel est le code qui permet qu'il se passe quelque chose quand on passe la souris sur un element ?

 

[poupilou]

Le code qui permet l'ouverture et la fermeture de la div n°1 est :

<div id="onglet_1" style="display:none;" onMouseOut="javascript:montre();" onMouseOver="javascript:montre('onglet_1');">Menu 1</div>

 

[loubet]

<div id="onglet_1" style="display:none;" onMouseOut="javascript:montre();" onMouseOver="setTimeout(function() {montre('onglet_1');}, 1000)">Menu 1</div>

adapté de http://stackoverflow.com/questions/9933175/add-delay-to-mouseover-usin ... javascript

les div sont bien en display none, donc le window.onload=montre; ne sert à rien.

 

[zeb]

Je voudrais apporter une temporisation sur l'ouverture de ces div parce qu'il suffit de passer sur les liens pour qu'elles s'ouvrent et parfois ce n'est pas nécessaire et même gênant

Ton souci c'est que l'évènement onmousover se produit même si tu passe par dessus sans spécialement vouloir l'ouverture, hors cet évènement est déclenché même si le pointeur a déjà quitté la zone sensible.

Je ne pense pas qu'une temporisation javascript changera quoi que ce soit a moins de tester si le pointeur a déjà quitté la zone après la tempo, mais bonjours l'usine a gaz ...

En revanche je me demande si une solution full CSS3 avec keyframe ne solutionnerait pas le problème car tu pourrais temporiser l'ouverture un chouilla et si jamais le pointeur est parti entre temps hors de la zone le display none reprendrait le dessus donc tu ne devrais rien voir s'ouvrir ...

 

[poupilou]

adapté de http://stackoverflow.com/questions/9933175/add-delay-to-mouseover-usin ... javascript

Cet exemple à l'air de fonctionner sur une image mais dans mon cas j'ai 6 liens (menus) différents et dans mon code javascript il y a une boucle for qui liste les différents id.... j'avoue que mes connaissances en javascript sont assez limitées et je ne vois pas comment je pourrais faire pour adapter mon code javascript en me servant du code javascript de l'exemple de cette image

Zeb aurais-tu un exemple de code avec full CSS3 avec keyframe ?

 

[zeb]

non pas sous la main désolé.