QUATRIEME TYPE DE BOUTON BIS : LES BOUTONS EN IMAGES PURES ARRANGES EN MENU

Exemple

Petites annonces Tous les articles Les magasins

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
.commun {background-repeat: no-repeat} /*empèche que l'image ne se répète */

.fond {background-color:white} /* le fond du menu est blanc */

a img {border-style:none} /* Les images avec des liens sont sans bordure */

a.menu1 {background-image: url(petites_annonces3.jpg)} /* image par défaut */
a.menu1:hover {background-image: url(petites_annonces4.jpg)} /* image du survol */

a.menu2 {background-image: url(articles3.jpg)} /* image par défaut */
a.menu2:hover {background-image: url(articles4.jpg)} /* image du survol */

a.menu3 {background-image: url(magasins3.jpg)} /* image par défaut */
a.menu3:hover {background-image: url(magasins4.jpg)} /* image du survol */

</style>
</head>

<body>

<div class="fond"> <!-- début zone de menu à fond blanc */
<a class="commun menu1" href="#"><img src="transparent.gif" width="140" height="20" alt="Petites annonces"></a> <!-- affichage du 1er bouton -->
<a class="commun menu2" href="#"><img src="transparent.gif" width="121" height="20" alt="Tous les articles"></a> <!-- affichage du 2ièm bouton -->
<a class="commun menu3" href="#"><img src="transparent.gif" width="90" height="20" alt="Les magasins"></a> <!-- affichage du 3ièm bouton -->
</div> <!-- fin zone de menu à fond blanc */

</body>
</html>

Pour tester ce script


COMMENTAIRES

Idem exemple 3 précédent. Cet exemple se justifie pour l'apparence d'un menu en boutons purs.

Il se justifie ausi par un exemple de code ou deux classes (.commun et .menux) sont combinés en un même style. Cela permet un codage plus compacte, puisque tous les éléments communs sont mis dans une seule classe, et que seuls les éléments différents sont affectés à des classes différentes.

Téléchargez petites_annonces3.jpg | petites_annonces4.jpg | articles3.jpg | articles4.jpg | magasins3.jpg | magasins4.jpg | transparent.gif

On voit une nouvelle fois qu'on peut faire des boutons avec effets de survol beaucoup plus légers en code qu'en java-script. Pas compatible Netscape 4.

- PS : Mieux vaux utiliser un roll-hover avec image en le couplant avec un pre-load CSS, et ce pour des raisons de rapidité d'affichage.