 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Créer des images réactives sans JavaScript |
| |
| En exploitant les possibilités des CSS, un rollover sur une image peut se construire de manière plus propre et accessible qu'avec un script.
(09/11/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Avec la disponibilité des feuilles de styles sur toutes les plates-formes des navigateurs modernes, il devient possible pour le développeur Web de mieux maîtriser le fonctionnement des sites. Le support de CSS 2.1 devient aujourd'hui une ubiquité, et avec lui vient la possibilité de soulager le navigateur de codes JavaScript lourds en temps de traitement, en les remplaçant par des règles CSS bien choisies.
Les images réactives, ou rollovers, font partie des bénéficiaires de l'avènement des CSS. Pour commencer, les pseudo-classes de CSS, à commencer par :hover, permettent de mettre en place une simple variation de couleur ou de forme, ce qui est suffisant pour des liens textuels.
#nav a { color: #fff; background: #000; }
#nav a:hover { color: #ddd; background: #666; }
Mais en combinant les pseudo-classes de CSS avec les règles de placement d'image, on peut facilement recréer le fonctionnement d'un rollover JavaScript, en améliorant du même coup l'accessibilité, l'usage de la bande passante et la maintenabilité du code.
L'idée reste d'utiliser un élément IMG, mais de n'y introduire qu'une image vierge (GIF ou PNG transparent), l'image elle-même étant prise en charge par la règle background-image de CSS. L'image transparente pourra ne faire qu'un pixel en tout et pour tout : la place occupée par l'élément IMG sera également gérée par CSS.
<a id="accueil" href="index.html"><img src="piskel.png" alt="Accueil"></a><a id="apropos" href="apropos.html"><img src="piskel.png" alt="A propos"></a><a id="contact" href="contact.html"><img src="piskel.png" alt="Contact"></a>
La CSS fera ainsi la part belle à background-image, ou plus simplement background :
#nav a img {
height: 150px; width: 50px; border-width: 0;
}
#nav a#accueil img {
background: url(accueil.png) top left no-repeat;
}
#nav a#apropos img {
background: url(apropos.png) top left no-repeat;
}
#nav a#contact img {
background: url(contact.png) top left no-repeat;
}
#nav a#accueil:hover img {
background: url(accueil-survol.png) top left no-repeat;
}
#nav a#apropos:hover img {
background: url(apropos-survol.png) top left no-repeat;
}
#nav a#contact:hover img {
background: url(contact-survol.png) top left no-repeat;
}
Ainsi, au survol, l'image de fond (donc celle visible) sera remplacée par une autre, occupant le même espace (ou pas, au besoin).
Seul souci possible, le temps de chargement. Tel quel, le code ne précharge pas la seconde image d'un élément (celle "de survol"), aussi lors de ce survol, il y a un risque de devoir trop attendre que cette image se charge. L'une des solutions consiste à cacher en haut de la page les images de survol :
<img src="accueil-survol.png" style="display:none;" alt=""/><img src="apropos-survol.png" style="display:none;" alt=""/><img src="contact-survol.png" style="display:none;" alt=""/>
|
|
|
|
|
|
|
Accueil
