Menu apparait au passage souris sur image

[paul30]

Salut à tous

Voilà, je fais appelle à vous car j'ai un problème. Pour le menu de ma page, j'aimerais que lorsque je passe avec la souris sur une image, le reste de mon menu apparaisse, et lorsque je ne suis plus ni sur le menu qui est apparu, ni sur l'image, et bien le menu se cache de nouveau. J'ai donc utilisé le code suivant :

<div id="menu" style="position:relative;display:none">

Le code de mon menu caché

<br />

Le code de mon menu caché

<br />

Le code de mon menu caché

<br />

Le code de mon menu caché </div>


<img src="plus.png" onmouseover="document.getElementById('menu').style.display='';" onmouseout="document.getElementById('menu').style.display='none';">

Mon problème est que lorsque je veux aller cliquer sur un des liens contenu dans mon menu caché, je pars de l'image avec ma souris et donc mon menu se recache aussi sec. Comment puis-je donc faire pour que tant que je suis sur le menu caché, celui-ci ne se fasse pas la male?

Merci par avance pour votre réponse,

A bientôt,

Paul

[captain_torche]

Il faudrait englober ton image et ton menu dans un même conteneur, et c'est lui qui aurait le comportement onMouseOver().

[Portekoi]

Bonjour,

Tu as un plugin très sympa en jquery pour cela : qTip :

http://craigsworks.com/projects/qtip/demos/

Ciao

Portekoi

[hsdino]

Ça se fait très simplement en CSS et sans JS.

Tu mets ton image dans ta div menu. Tu ajoutes après l'image ton menu en UL/LI par exemple. Le UL est en display:none par défaut.

<div id="menu">

<img src="" />

<ul>

<li>menu 1</li>

<li>menu 2</li>

</ul>

</div>

Ensuite tu ajoutes un CSS :

#menu ul {

display: none;

}

#menu:hover ul {

display: block;

}

Modifié 25 Avril 2013 par hsdino

[paul30]

Bonsoir,

Merci beaucoup à tous pour vos réponses

Je vais allé éssayé tous sa.

Encore merci = )

A bientôt,

Paul