Amis du soir bonsoir,
je suis tout nouveau sur alsacréations et je dois avouer que je ne suis pas familiarisé avec les forums alors j'espère que je pose ma question au bon endroit .
Voilà, je suis en train de développer un petit site web pour un ami. J'ai intégré un menu jquery dans lequel le survol des liens entraine l'apparition d'un thumbnail juste au dessus du lien (déroulement vers le haut). Mon code fonctionne, mais le soucis est que lorsque je passe sur un lien et que je reviens dessus trop rapidement, il plante
. Suite à quoi le thumbnail n'apparait plus/ou mal lorsque je re-survol le lien.
Voici mon code html:
<head>
<title>Sous Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div id="sous_menu_media">
<ul>
<li class="onglet_sous_menu">
<a href="media.php" class="lien"><img src="images/sous_menu/presse.jpg"/></a>
<div class="thumb"><!--div cachée qui contient mon thumbnail - apparait au survol de li-->
<div class="img_thumb"><img src="images/sous_menu/thumbs/presse.jpg"/></div>
</div>
</li>
<li class="onglet_sous_menu">
<a href="media.php" class="lien"><img src="images/sous_menu/brunch.jpg"/></a>
<div class="thumb">
<div class="img_thumb"><img src="images/sous_menu/thumbs/brunch.jpg"/></div>
</div>
</li>
</ul>
<!--fin de sous_menu_media-->
</div>
</body>
</html>
Et voici mon menu.js:
//vérification si jquery bien lancé
$(document).ready(function(){
//initialisation des sous_menus
sm = new sous_menu("#sous_menu_media");
});
var sous_menu=function(id){
var self=this;
this.div=$(id);
//lorsqu'on est sur un elt de liste
$("li").mouseover(function(){
this.img_thumb=$(this).find(".img_thumb");
this.img_thumb.stop().slideToggle();
});
$("li").mouseleave(function(){
this.img_thumb=$(this).find(".img_thumb");
this.img_thumb.stop().slideToggle(500);
});
}
J'espère sincèrement que quelqu'un pourra me donner un petit coup de pouce. Je débute en javascript, c'est po facile tous les jours.
Merci à vous pour votre aide.
amicalement
Modifié par limonade (18 Dec 2009 - 07:42)
je suis tout nouveau sur alsacréations et je dois avouer que je ne suis pas familiarisé avec les forums alors j'espère que je pose ma question au bon endroit .
Voilà, je suis en train de développer un petit site web pour un ami. J'ai intégré un menu jquery dans lequel le survol des liens entraine l'apparition d'un thumbnail juste au dessus du lien (déroulement vers le haut). Mon code fonctionne, mais le soucis est que lorsque je passe sur un lien et que je reviens dessus trop rapidement, il plante
. Suite à quoi le thumbnail n'apparait plus/ou mal lorsque je re-survol le lien.Voici mon code html:
<head>
<title>Sous Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div id="sous_menu_media">
<ul>
<li class="onglet_sous_menu">
<a href="media.php" class="lien"><img src="images/sous_menu/presse.jpg"/></a>
<div class="thumb"><!--div cachée qui contient mon thumbnail - apparait au survol de li-->
<div class="img_thumb"><img src="images/sous_menu/thumbs/presse.jpg"/></div>
</div>
</li>
<li class="onglet_sous_menu">
<a href="media.php" class="lien"><img src="images/sous_menu/brunch.jpg"/></a>
<div class="thumb">
<div class="img_thumb"><img src="images/sous_menu/thumbs/brunch.jpg"/></div>
</div>
</li>
</ul>
<!--fin de sous_menu_media-->
</div>
</body>
</html>
Et voici mon menu.js:
//vérification si jquery bien lancé
$(document).ready(function(){
//initialisation des sous_menus
sm = new sous_menu("#sous_menu_media");
});
var sous_menu=function(id){
var self=this;
this.div=$(id);
//lorsqu'on est sur un elt de liste
$("li").mouseover(function(){
this.img_thumb=$(this).find(".img_thumb");
this.img_thumb.stop().slideToggle();
});
$("li").mouseleave(function(){
this.img_thumb=$(this).find(".img_thumb");
this.img_thumb.stop().slideToggle(500);
});
}
J'espère sincèrement que quelqu'un pourra me donner un petit coup de pouce. Je débute en javascript, c'est po facile tous les jours.
Merci à vous pour votre aide.
amicalement
Modifié par limonade (18 Dec 2009 - 07:42)