Menu déroulant sur image [Résolu]

Signaler
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
-
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
-
bonjour !
Je cherche un moyen de faire un menu qui se déroule lors du survol d'une image, si possible avec une image map.

en gros mon menu sera une image (menu.jpg
), avec des zones réactives et lors du survol d'une de ces zones, un menu se apparait (en dessous). Ce menu (enfin, cette image) pourra être placé(e) n'importe où sur la page, donc pas de position absolue.

voilà !
j'ai beaucoup cherché et je n'ai pas trouvé.

merciiii







-----------------------------------------



Jack NUMBER

 

12 réponses

Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
j'ai trouvé !!
je reprend le script de stfou:

<script>
function show(object,state)
{
var menu= document.getElementById("menu");
if(state=="on")
{
menu.style.display="";
menu.style.position=absolute;
menu.style.top=object.offsetTop;
menu.style.left=object.offsetTop;
}
else
{
menu.style.display="none";
menu.style.top=170;
menu.style.left=360;
}
}
</script>

CODE DU DIV (calque/couche)

Donc j'ai rajouté menu.style.position=absolute; pour que la position soit absolu lors de l'affichage du DIV, jai définit des onmouseover et onmouseout pour le DIV et j'ai mis des valeurs pour l'affichage et la position du DIV.

/!\ Pensez à mettre les mêmes valeurs pour la position du DIV et les coordonées de son affichage:




menu.style.top =170;

menu.style.left=360;
et







170; left:360;







voila !!
merci à stfou.













-----------------------------------------



Jack NUMBER

 
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Bonjour,

le code de ton menu

Le travail n'a jamais tué personne, mais pourquoi prendre le rique ?
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
ha super !! merci
juste: tu n'as pas fermé ta balise img (>
à la fin du code)
et le menu s'affiche avant que je ne le suvole, il fodrait faire en sorte que lors du chargement de la page, il se cache.

merci encore pour cette réponse si rapide.







-----------------------------------------



Jack NUMBER

 
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
ha, aussi, le menu ne s'affiche pas lors du survol..................







-----------------------------------------




Jack NUMBER


 
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
ha aussi, lorsque je vais sur le menu bah.......... il disparait puisque je suis en dehors de l'image.

-----------------------------------------
Jack NUMBER 
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Bonjour,
faute de frappe display:none et non pas diplay:none
et c'est onmouseover.
lol c'est pas mon jour moi

<hr />Le travail n'a jamais tué personne, mais pourquoi prendre le rique ?
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
donc je refais le code lol :

le code de ton menu

<hr />Le travail n'a jamais tué personne, mais pourquoi prendre le rique ?
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
ouaiiiii !!
merci
et y orait-il un moyen de faire apparaitre le menu comme un calque par dessus la page et en dessous de l'image
ça serait top !

merci





-----------------------------------------




Jack NUMBER


 
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Bonjour,
Oui,

<script>
function show(object,state)
{
var menu=document.getElementById("menu");
if(state=="on")
{
menu.style.display="";
menu.style.top=object.offsetTop;
menu.style.left=object.offsetTop;
}
else
{
menu.style.display="none";
menu.style.top=0;
menu.style.left=0;
}
}
</script>

cod du menu

<hr />Le travail n'a jamais tué personne, mais pourquoi prendre le rique ?
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
GÉNIAL !

juste un petit détail, comment faire pour que le menu affiché ne clignote pas lors du mouvement de la souris (sans doute dût au scrit qui le cache en dehors de l'image)

arpès ça sera parfait !!!






-----------------------------------------




Jack NUMBER


 
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2
ya aussi la position qui est absolu, je voulai qu'elle ne le soit pas, qu'elle aparaisse en dessous de l'image (donc la position sera relative à l'image)
et aussi, on a pas le temps de cliquer si l'image n'est pas en haut à gauche de la page.








-----------------------------------------




Jack NUMBER


 
Messages postés
233
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
26 juin 2011
2