Menu javascript Mootools

Bien le bonjour,

Un petit soucis technique de mon coté, donc je viens quérir de l'aide...
J'utilise un menu avec le script Mootools, mais j'ai un problème avec les liens.
Mon menu contient des images qui changent lors du passage du curseur. Mais du coup, les liens deviennent non clickables si la souris n'est pas en mouvement.
Voici un exemple du menu sur lequel je me suis inspiré (il contient le meme bug...) http://tobypitman.com/mootools/hover.html

Vous remarquerez que le lien fonctionne alors lorsque la souris est en mouvement, mais pas lorsquel celle ci est figée...
D'ou mon probleme...
Alors s'agit-il d'un probleme au niveau du lien, ou du javascript en lui meme?
Modifié par antaspen (24 Jun 2008 - 10:29)

Hello antaspen et bienvenue parmi nous ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Arf ! C'est vrai qu'un lien vers une page de test c'est mieux que du code mais tu aurais pu laisser la partie javascript qui pose problème .

En tout cas je confirme le bug et cela vient sûrement du JS puisqu'en le désactivant les liens redeviennent fonctionnels.

Mouarf ca complique la tache...

(Pour ceux qui préfèrent avé le code qui pose probleme le voici...)

Code CSS :
#menu{
width:300px;
height: 50px;
background: url(hover_fichiers/menu_03.jpg) no-repeat top left;
list-style: none;
}

#menu li{
display: inline;
display: block;
width:100px;
height: 50px;
float:left;
}
#menu li a{
text-indent: -9999px;
display: block;
width:100px;
height: 50px;
}

#about{ background: url(hover_fichiers/list_04.jpg) no-repeat top left;}

Code HTML (exemple de lien):
<li><a id="about" href="http://www.labauletv.com">about</a></li>

Bonjour,

Ce menu est fonctionnel en désactivant le javascript et les css.
Mais attention, étant donné la technique utilisée (text-indent sur les a), ce même menu est inutilisable si les images ne sont pas affichées ou trouvées (choix de l'utilisateur ou autres...).

Il est possible d'avoir le même rendu (basé sur jQuery) avec des images intégrées directement dans le html (et non en background dans la css).
Cette technique permet de laisser le menu fonctionnel même en cas de désactivation des feuilles de style, du javascript et de l'affichage des images dans la mesure ou le 'alt' de ces dernières soit bien renseigné.