Problème menu deroulant (html ou javascript)

Résolu/Fermé
Nivek Freedomsoul - 16 juil. 2009 à 01:21
 Nivek Freedomsoul - 17 juil. 2009 à 04:28
Bonsoir,

J'essaie de créer un site internet (comme beaucoup de personne ...), et pour l'instant il se trouve en phase de construction ^^
Et comme beaucoup je rencontre des problèmes
je suis pas sur que c'est faisable en html mais comme j'étais près du but, je me creuse encore la tête ^^

<map name="testimage">
<area shape="rect" coords="50,37,130,53" href="lien.php">
</map>
<img src="images/menu1.bmp" onMouseOver="this.src='images/menu1.bmp'" onMouseOut="this.src='images/menu1.bmp'" onMouseDown="this.src='images/menu1_2.bmp'" onMouseUp="this.src='images/menu1_2.bmp'" usemap="#testimage" alt="test"/><br>


on a ici les différents éléments:
lorsqu'on passe avec la souris sur l'image, elle s'agrandit et affiche les sous-menus cependant quand je veux cliquer sur les sous menu qui apparaissent(grâce au mapage), l'image redevient initial :/
donc impossible de cliqué sur les liens-images

si ce n'est pas possible en html, la méthode javascript est-elle beaucoup plus ompliqué ,
si vous ne comprenez pas tout n'hésitez pas a me le faire savoir

Merci d'avance
A voir également:

4 réponses

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
16 juil. 2009 à 09:33
En fait, quand tu écris:
onMouseUp="this.src='images/menu1_2.bmp';"

La partie soulignée c'est du javascript.

Pour commencer, évites les images en bmp mets plutôt du gif, jpg ou png. Elles sont beaucoup moins lourdes. Tu remarqueras que j'ai ajouté un ; à la fin de l'instruction. Si tu dois en ajouter une autre ce ; est obligatoire alors autant le mettre dès le départ.

Ensuite, je pense que ton problème viens du fait que même si la source de l'image change, il conserve la taille de départ comme zone réactive au "onmouse". Pour résoudre ce problème, j'agrandirais l'image de départ avec une partie transparente à la place des menus (transparence avec .gif)
0
Nivek Freedomsoul
16 juil. 2009 à 14:38
Tout d'abord, merci pour ta réponse claire !
merci pour le conseil des images ;)
oui exact c'est du javascript ... j'ai meme pas faire attention U_u

[quote]il conserve la taille de départ comme zone réactive au "onmouse".[/quote]

oui c'est exact c'est ce que je croyais comprendre, mais le truc c'est que je voulais justement que l'image s'agrandisse ^^
Enfin bon c'est pas trop grand je peux mettre l'image directement avec les sous-menu !

En tout cas
Merci beaucoup pour ton aide ! ça m'a fait réflechir ^^

Bonne continuation ,
Nivek Freedomsoul
0
Nivek Freedomsoul
17 juil. 2009 à 04:04
bon et bien me revoilà ^^
j'ai bien mis mes images en png (merci encore du conseille: 97 ko en bmp et même pas 30 Ko en png ;p moi qui me plaignais qu'IE était lent :s), et la transparence y est puisque je voie le fond avant le clik =)

ton idée m'a donné envie d'essayer cependant sans succès, dans ce cas là, on a toujours les mappages mais l'image redeviens initial :/
tu n'auras pas, comme je suis pas trop calé javascript, me donner une commande, genre, clique => ouvert (on peut le laisser ouvert si on veut) et un autre clique pour le fermé
je sais que "onclik" existe mais ça m'a l'air plus compliqué avec les function() et tout le tralala ^^"

Merci beaucoup !
0
Nivek Freedomsoul
17 juil. 2009 à 04:28
en tatonnant j'ai fini par trouver une solution ^^

<img src="images/menu1_1.png" onclick="this.src='images/menu1_2.png'" onMouseOver="this.src='images/menu1_1.png'" usemap="#menu1" border="0"/><br>

bon maintenant je peux aller sur le lien et cliquer (j'ai remis l'image initiale (celle plus petite) qui se déroule en plus grande)
mais quand je vais sur le lien , puis que je pars ça ferme les sou-menu !^^
enfin on peut pas tout avoir :D
c'est suffisant , merci beaucoup de votre aide

je classe comme résolu =)

Merci encoe !
0