Revenir à l'article | Télécharger | http://iubito.free.fr

Pour faire ce menu en image...

1. On commence par le plus simple, une image de fond : c'est du css tout simple :
   background: url("uneimage.gif") #unecouleur (la couleur est là en attendant que l'image se charge, ou au cas où l'image est introuvable).
2. Toujours dans le CSS, pour éviter une bordure autour de l'image, j'ai modifié le padding de .menu, .ssmenu , je l'ai mis à 0. Mais maintenant le texte des liens touche le bord, ça fait un peu du texte qui va tomber dans le précipice... pas terrible, donc, j'ai mis le padding de .menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited à 2. ah! c'est beaucoup mieux ! :)
   
3. Ensuite j'ai créé 3 images de même taille (107x21 pixels), c'est juste le texte qui change.
   Dans le js il faut mettre les bonnes tailles... : largeur_menu = 107; et on peut modifier top_ssmenu au besoin.
4. Au lieu de mettre du texte dans le menu, j'ai mis
   <img src="image.gif" alt="Le texte!" /><span>&nbsp;</span>.
   Attention : on ne néglige pas le alt ni le span avec la ponctuation pour les synthèses vocales !
5. Dernier petit soucis : comme j'ai mis un padding dans les liens, il y a un espace autour des images :(
   Pas de panique ! on corrige en ajoutant ça :

   .menu a, .menu a:visited {
   	padding:0;
   }

   ça remet le padding des liens à 0 pour nos images, le reste est intact :)

Pour mettre des images à la place du texte, il suffit de mettre <img src="..." alt="Le texte" /> dans le <a href< ;)