La réponse est peut-être tardive, mais elle vaut ce qu'elle vaut.
Jette un oeil sur cette page d'alsa création
Une image réactive (rollover) sans javascript
édit par Igor: merci de prendre le temps de faire de vrais liens et ne pas déformer le forum
dont voici les extraits :
a écrit :
Une image réactive est une image (menu, bouton, photo,...) qui change lors du survol de la souris. La plupart du temps, les webmasters ont recours au javascript (onmouseover,...) pour gérer ce survol. Ce code est parfois lourd, notamment lorsqu'il est généré par des logiciels, et surtout inaccessible : en effet, à l'heure actuelle javascript est désactivé ou inutilisable chez environ 10% des internautes (source : W3Schools).
Nous allons donc nous y prendre différemment, sans avoir de recours à des artifices. (Voir le résultat ici)
En général, une image réactive est utilisée en tant que lien, souvent dans un menu, pour accéder à d'autres pages du site.
Nous allons donc la considérer comme tel : un lien. En clair, nous n'allons utiliser que la balise <a> pour gérer les différents états de l'image lors du survol de souris.
Grâce aux feuilles de style CSS, nous n'aurons que quelques lignes à écrire pour créer cette image réactive.
Code CSS :
a.image { /* définition de la classe "image" de la balise <a> */
display: block; /* la balise a doit être en bloc */
width: 100px; /* largeur de l'image réactive */
height: 100px; /* hauteur de l'image réactive */
background-image: url(image1.gif); /* source de l'image de départ */
background-repeat: no-repeat;
}
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(image2.gif); /* source de l'image d'arrivée */
}
+ le lien dans la page html
<a class="image" title="description du lien pour les synteses vocales" href="lien.htm"></a>
tu peux appliquer ce qui expliqué en employant une image gif dont la partie supérieure est transparente pour la première image, tandis que la deuxième image sera compléte, et apparaitra donc légérement plus haute.
Modifié par Igor (21 Oct 2005 - 17:14)