Menu horizontal en image

Je doit faire un menu horizontal avec des images j'essaie donc de comprendre cet exemple
" rel="nofollow noopener" >http://www.alsacreations.com/articles/rollover_unique/sibelius.htm

mais chez moi c'est assez différent:
Les images ce sont bêtement les rubriques dans un typo particulière de couleur verte et au survol elle devrait changer de couleur.
Et chaque lien a une largeur différente selon la longueur du texte.

Donc je suis assez perdue sur ce coup là... Si quelqu'un pouvais me donner une nouvelles pistes à suivre...

Salut,

Ton url n'est plus à jour, elle pointe sur l'ancienne version d'Alsa.

Pour les explications, il y'a un Tutoriel prévu.

Si chaque lien a une taille relative à la longueur du texte, tu ne pourras pas procéder par images : car l'image doit obligatoirement avoir une largeur définie pour être en background.

Il faudra donc utiliser des "vaies" images, c'est à dire des balises <img>.

Puisqu'il ne s'agit que d'un changement de couleur de police, il serait plus simple, propre, rapide et accessible de ne faire qu'un survol sur un vrai texte et pas une image... en plus, ça facilitera le référencement de ton document.

C'est bien ce que je pensais alors, va falloir découper.

Je suis bien d'accord avec toi pour l'accessibilité mais le client veut utiliser les polices de sa charte graphique pour le menu et ce n'est pas une police standard donc à part le faire en image je connais pas d'autre solution...

Bon, finalement j'essaie de faire mon menu image en utilisant les image map en css.

Seulement j'ai un décalage dans mon roll over de 1 px vers la gauche et un pix vers le haut. Comment corriger ça?

Voilà l'extrait de code correspondant

#gauche {
margin-left : 6px;
width: 754px;
background-image : url(design/bgtopmen.jpg);
background-repeat: no-repeat;

}

#lien1 { 
float: left;
width : 56px;
height: 22px;
margin-top: 150px;
}
#lien1:hover { 
width : 56px;
height: 22px;
margin-top: 150px;
background : url( design/acc-ov.gif) top left no-repeat;

}

#lien2 { 
float: left;
width : 83px;
height: 22px;
margin-top: 150px;
margin-left : 8px;
}
#lien2:hover { 
width : 83px;
height: 22px;
margin-top: 150px;
margin-left : 8px;
background : url( design/pres-ov.gif) top left no-repeat;

}

<div id="gauche"><img src="design/imadr1.jpg" id="illudroite"  alt="illu1"/>
<a id="lien1" href="#" title="accueil"></a>
<a id="lien2" href="#" title="présentation"></a>

Autre problème. En dessous de se menu j'ai une image qui doit être à gauche (avec une petite marge) dans le conteneur. Et au fur et à mesure que je met en place mes liens cette image se décale vers la droite.

Coment la remettre à gauche?
Modifié par Xadrez (15 Mar 2005 - 13:51)