11548 sujets

JavaScript, DOM et API Web HTML5

Menu avec rollover

Bonjour,

Voilà j'avais pour idée de faire un menu composé seulement d'images, avec une première image de base et une qui apparait lorsque la souris passe sur l'image de base, un rollover donc.

En XHTML/CSS tout fonctionne à partir du moment où je n'incère pas de lien bien entendu. C'est pourquoi j'ai demandé comment faire ce que je souhaite sur le forum CSS, on m'a dit : JAVASCRIPT.

Alors moi je veux bien mais je suis débutant en JavaScript et incapable de faire un menu avec rollover tout seul. C'est pourquoi je m'en remets à vos connaissances pour que vous me guidiez ou m'apportiez des conseils.

Pour l'instant j'ai trouvé ce site http://tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html mais le problème c'est que moi c'est une image différente pour chaque image de bases...

Je sais pas si je suis très clair... Pour chaque image de base du menu (6), il y a une image de rollover.

Merci d'avance pour votre aide en tout cas. Smiley lol
Je dois t'avouer que j'ai regardé mais en coup de vent. Sans doute l'excitation de vouloir avancer dans la conception ! Smiley langue

Enfin bon, ca n'a pas été si mauvais puisque j'ai réussi à faire mon rollover pour chaque image, par contre en mettant six balises script dans mon header... M'enfin bon pour l'instant ca fera l'affaire.

Merci en tout cas Smiley smile
Ça fait longtemps que je n'ai pas utilisé les "portes coulissantes", mais de mémoire, il me semble que tu n'as pas besoin d'utiliser JavaScript :o

Chaque élément de ton menu est du type <li><a></a></li>.

Avec en background de chaque <li> ton image / ton image lors du hover.

Tu peux même certainement te permettre d'utiliser une seule image, contenant les deux états de tous tes éléments.
A toi de donner un id par Élément de menu.

Ça donnerait ce genre :


<ul id="Menu">
      <li id="Element_1"><a href="#Lien_1" title="aller à la section 1">item1</a></li>
      <li id="Element_2"><a href="#Lien_2" title="aller à la section 2">item2</a></li>
      <li id="Element_3"><a href="#Lien_3" title="aller à la section 3">item3</a></li>
      <li id="Element_4"><a href="#Lien_4" title="aller à la section 4">item4</a></li>
</ul>


Et ton css :


#Element_1
{
      background-image:url('Mon_Image.png');
      background-position: 0px 0px;
}

#Element_1:hover
{
      background-image:url('Mon_Image.png');
      background-position: 0px 300px;
}

      ....

#Element_4
{
      background-image:url('Mon_Image.png');
      background-position: 400px 0px;
}

#Element_4:hover
{
      background-image:url('Mon_Image.png');
      background-position: 400px 300px;
}
Sujet clos
Aller à