Menu : fond des liens

http://css.alsacreations.com/xmedi [...] tical.htm#

Regarde le code source de la page.

http://www.alsacreations.com/articles/cadre/

Dit moi ce que tu veux, je te le ferrais.

pourquoi ne pas créer des images qui contiennent le texte des liens, et quand la souris passe sur l'image, du changes d'image par un rollover (rollover: cf http://www.jejavascript.net/rollover.php)?

Non, dans ce cas, je penserais que le mieux serait de passer par deux images.

Je t'explique la chose.

Une crée un icône de 150 pixel de largeur et 50 pixel de hauteur.
Tu définis une première image sur l'icône dans le cadre de 75 pixels sur la gauche.
Tu définis une deuxième image sur l'icône dans le cadre de 75 pixels sur la droite.

Quand, la souris n'est pas sur une icône, l'image reste celle de gauche. Quand la souris passe sur une icône, l'image se place à droite.

Exemple ici:
http://css.alsacreations.com/xmedi [...] menu4.html

"La méthode des portes coulissantes

Il reste cependant un détail gênant: le délai d'affichage de l'image au moment du survol. En effet, l'image "lienHover.png" n'est pas chargée par le navigateur avant que le visiteur ne passe sa souris au-dessus du menu. Il doit donc aller la chercher sur le serveur, ce qui demande un peu de temps (même si l'image est très légère!).

Dans ce cas précis, ce n'est pas trop pénalisant, car tous les items du menu utilisent les mêmes images d'arrière-plan. Le délai ne se fera sentir qu'une seule fois. Mais rien n'empêche de réaliser des menus plus complexes, où les différents items du menu ont des images d'arrière-plan différentes. Le manque de réactivité du menu devient alors très ennuyeux!

Heureusement, il existe une astuce qui permet de supprimer complètement cette inertie: la méthode des "portes coulissantes".

Au lieu d'utiliser 2 images distinctes pour l'état normal et l'état survolé, on va les regrouper dans une seule et même image. Ici, par exemple, on crée une image de 300x50 px:"

Non, puisque tu ferras ça avec des images dans ce cas

Puis, c'est du Css, le texte restera au milieu
A toi de bien gérer l'image

Règle la taille du texte dans ce cas