Exemple
<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>
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.