Page 1 sur 1

time out sur menu dynamique

Posté : 08 avr. 2005, 18:46
par benjaminparis
Bonjour à tous

j'ai un problème avec mon menu dynamique : dès qu'on les survole(monse on), les sous menus restent affichés en permanence, même lorqu'on passe en mouse out.

On est obligé de cliquer en dehors pour qu'il disparraissent.

Ma question : peut on mettre un "time out" de 1-2 secondes de façon a ce que les ss menus disparaissent quand la souris ne pointe plus dessus.

le menu : http://cedricparisot.free.fr/menu/menu.htm

Les fichiers : http://cedricparisot.free.fr/menu/

merci d'avance

Benjamin

Posté : 21 avr. 2005, 11:07
par mcbenny
Salut,

Le probleme est le temps de reaction du navigateur la plupart du temps.
Pour t'assurer de la fermeture de tes menus, utilise non pas un 'onMouseOut' sur les menus, mais un onMouseOver sur une grosse image transparente placee sous les menus.

En clair :
onmouseover :
- apparition du menu
- apparition d'un autre calque sous le menu, beaucoup plus grand avec une image transparente dessus qui a un onmouseover 'disparition'.

la fonction disparition masque le menu et l'autre calque.
Effet garanti.
Libre a toi ensuite de mettre un setTimeout sur l'image pour temporiser la disparition.

Hope This Helps

Posté : 22 avr. 2005, 16:52
par remram44

Code : Tout sélectionner

<script language="JavaScript" type="text/JavaScript"> var cache; // Fonction pour afficher ou masquer les liens function Links(montre) { if(montre==0) { cache=setTimeout("document.getElementById('liens').style.visibility='hidden';",1800); } if(montre==1) { document.getElementById("liens").style.visibility="visible"; clearTimeout(cache); } } </script>

Code : Tout sélectionner

<div id="liens" style="position:absolute; left:175; top:360; visibility:hidden;" onMouseover="javascript:Links(1);" onMouseout="javascript:Links(0);"></a>

Code : Tout sélectionner

<a href="#" onMouseover="javascript:Links(1);" onMouseout="javascript:Links(0);" class="menu">Liens</a>

Posté : 22 avr. 2005, 18:07
par Cyrano
Personnellement, j'utilise 4 évènements dans un lien :
-1- onmouseover;
-2- onfocus (pour les intrenautes qui naviguent au clavier
mais aussi
-3- onmouseout;
-4- onblur (même raison que 2)
Les 3 et 4 peuvent aussi déclencher l'évènement inverse : si tu utilises la fonction montre illustrée par remram44 sur le mouseOver, tu peux ajouter lun fonction cache() sur le mouseOut.
Donc, sous réserve pour la syntaxe exacte, je ne suis pas un spécialiste en javascript, tu pourrais avoir deux petites fonctions appelées en fonction de l'évènement:

Code : Tout sélectionner

function montre(lien) { document.getElementById(lien).style.visibility='visible'; } function cache(lien) { document.getElementById(lien).style.visibility='hidden'; }
Enfin c'est l'idée générale, gérer aussi l'évènement inverse sans attendre le bon vouloir du navigateur.

Posté : 22 avr. 2005, 19:29
par remram44
L'idée c'est que je n'ai pas fais de fonction montre() mais une fonction Links() qui affiche ou cache les liens.

Posté : 22 avr. 2005, 19:33
par Cyrano
Ben peu importe: si l'évènement onMouseOut déclenche pas la fonction, ça fonctionnera pas plus

Posté : 23 avr. 2005, 10:36
par Invité

Code : Tout sélectionner

<div id="liens" style="position:absolute; left:175; top:360; visibility:hidden;" onMouseover="javascript:Links(1);" onMouseout="javascript:Links(0);"></a>
Comme on le voit sur ce bout de code, l'évennement onMouseout du div du menu déclanche bien ma fonction. Mais le menu ne disparait pas instantanément, puisque il y a un timeout de 1,8 secondes avant que le menu ne se ferme. De plus, si on repasse la souris sur le menu ou sur le lien qui l'ouvre, le timeout est supprimé par clearTimeout(cache).

Posté : 23 avr. 2005, 11:40
par Cyrano
Salut,
ton problème m'a poussé à chercher une solution: je ne sais pas si c'est très exactement ce que tu cherches, mais voilà ce que j'ai fait: je l'ai testé avec Firefox, IE6 et même Opera et ça fonctionne dans les trois cas:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu dynamiques en JavaScript</title>
<script language="JavaScript" type="text/JavaScript">
// Fonction pour afficher ou masquer les liens
function Links(montre, id)
{
  var cache = setTimeout("document.getElementById("+ id +").style.visibility='hidden';", 1800);
  if(montre==0)
  {
    document.getElementById(id).style.visibility='hidden';
    clearTimeout(cache);
  }
  if(montre==1)
  {
    document.getElementById(id).style.visibility="visible";
  }
}
</script>
</head>
<body>
<div id="liens_A" style="position:absolute; left:100; top:100; visibility:hidden;" onMouseover="javascript:Links(1, 'liens_A');" onMouseout="javascript:Links(0, 'liens_A');">
<ul>
  <li><a href="#" class="" title="">Liens A-1</a></li>
  <li><a href="#" class="" title="">Liens A-1</a></li>
  <li><a href="#" class="" title="">Liens A-3</a></li>
  <li><a href="#" class="" title="">Liens A-4</a></li>
  <li><a href="#" class="" title="">Liens A-5</a></li>
</ul>
</div>
<div id="liens_B" style="position:absolute; left:150; top:100; visibility:hidden;" onMouseover="javascript:Links(1, 'liens_B');" onMouseout="javascript:Links(0, 'liens_B');">
<ul>
  <li><a href="#" class="" title="">Liens B-1</a></li>
  <li><a href="#" class="" title="">Liens B-1</a></li>
  <li><a href="#" class="" title="">Liens B-3</a></li>
  <li><a href="#" class="" title="">Liens B-4</a></li>
  <li><a href="#" class="" title="">Liens B-5</a></li>
</ul>
</div>
<div id="liens_C" style="position:absolute; left:200; top:100; visibility:hidden;" onMouseover="javascript:Links(1, 'liens_C');" onMouseout="javascript:Links(0, 'liens_C');">
<ul>
  <li><a href="#" class="" title="">Liens C-1</a></li>
  <li><a href="#" class="" title="">Liens C-1</a></li>
  <li><a href="#" class="" title="">Liens C-3</a></li>
  <li><a href="#" class="" title="">Liens C-4</a></li>
  <li><a href="#" class="" title="">Liens C-5</a></li>
</ul>
</div>
<a href="#" onMouseover="javascript:Links(1, 'liens_A');javascript:Links(0, 'liens_B');javascript:Links(0, 'liens_C');" class="menu">Liens A</a>
<a href="#" onMouseover="javascript:Links(0, 'liens_A');javascript:Links(1, 'liens_B');javascript:Links(0, 'liens_C');" class="menu">Liens B</a>
<a href="#" onMouseover="javascript:Links(0, 'liens_A');javascript:Links(0, 'liens_B');javascript:Links(1, 'liens_C');" class="menu">Liens C</a>
</body>
</html>
Alors petit détail : dans les menus de base, j'ai supprimé l'évènement onMouseOut : en principe, ces liens-là ne sont là que pour faire apparaître les sous-menus : si donc tu survoles avec ta souris un des menus de base et qu'après ton pointeur ne touche pas le sous-menu qui apparaît, il n'y a pas de time-out, mais je pars du principe qu'on cherche un lien dans une page et donc qu'on pointera naturellement vers un des choix: en quittant ce sous menu, il disparait: si on survole alternativement les menus de base on fait apparaître alternativement les sous-menus correspondant sans time-out : en fait, le time-out ne sert qu'à laisser le temps entre le choix primaire et la sélection secondaire, autrement, il n'a pas vraiment de raison d'être.

Voilà, à défaut d'être LA réponse attendue, peut-être y trouveras-tu des pistes de solution pour ce que tu veux exactement faire.