Généralités
La mise en place de menus avec des images est facile à réaliser en HTML, tout en restant rigoureux pour sa réalisation.
Voici les codes correspondants, ainsi que l'image du bouton que vous pouvez copier si bon vous semble pour réaliser un premier essai.Vous constatez aussi dans ce modèle, qu'il est possible de conserver un affichage différent pour les liens placés ailleurs dans la page.
Fonctionne avec Internet Explorer, Netscape et Mozilla Firebox.
Dans le code suivant, vous avez en bleu les codes des liens normaux de la page. En effet suivant la composition de votre contenu, vous pouvez disposer des liens qui ne font pas partie du menu. Suivant la couleur du fond de page par rapport à la couleur du fond de l'image il pourrait y avoir des problèmes de lisibilité. Ainsi dans cette page le jaune des boutons ne convient pas pour les liens de la page.
Vous avez ensuite en vert les codes des liens du menu ci-contre, avec l'image "bouton.gif" placée dans le sous-dossier "aimages" de mon répertoire.
Pour copier le bouton de l'image > > >
|
CODE placé entre <HEAD> et </HEAD> |
.lien1:link |
|
|
|
<table width="148"
border="0" cellspacing="10" cellpadding="0"
align="left">
|
| En rose = définition du tableau, avec un "cellspacing" de 10 (écartement autour de chaque cellulle), "align="left" pour aligner à gauche de la page, et attention "widht="148" soit largeur de l'image 127 + 10+10 de cellespacing +1 d'épaisseur du cadre du tableau = 148. Cette dernière dimension doit faire l'objet de contrôles jusqu'à l'obtention de l'image qui ne doit pas être tronsuée ni répétée. width="127" height="39" c'est la dimension de l'image "bouton.gif" qui fait 2.51 Ko. En marron = ici vous trouvez une séparation entre les images du menu, qui est définie par une cellule vide de "height="15" dans cet exemple. Bien sûr dans ce cas il est possible de remettre le "cellspadding à zéro. Pour la démonstration, le premier bouton est en taille 2, le suivant en taille 3, puis 5 et le dernier en 3.
|
