Changement d'image au survol du pointer
Pour animer une image au survol du curseur, la technique la plus employée est celle du roll-over. En utilisant uniquement une image de fond, la pseudo-classe :hover et l’attribut background position, on simule un changement d’image.
C’est donc une méthode simple et peu gourmande en ressources pour dynamiser son site.
Le souci c’est qu’avec cette méthode l’image est une image de fond et n’est donc pas indexée comme le reste du contenu de la page.
Pour faire une image qui change au survol du curseur et qui soit indexée par les moteurs de recherche comme google image, on peut utiliser du javascript avec la librairie jquery.
Tout d’abord, préparez deux images de la même dimension : une pour l’apparence normale de l’image, une autre pour son apparence au survol du pointer.
par exemple :
l’image normale et l’image au survol
Ajoutez la classe « action » à votre image, appelez la librairie jquery dans votre document html puis dans votre feuille de script ajoutez ce code:
Maintenant l’effet marche, c’est-à-dire qu’au survol du pointeur, l’image change, et revient quand le pointeur sort de l’image. Le problème, c’est que l’image au survol met un léger temps à être chargée… et c’est plutôt désagréable.
Pour corriger ceci, on va encore utiliser jquery pour précharger les images.
Ceci est la fonction à laquelle on va faire appel pour précharger les images. Après l’avoir inséré, on va par exemple insérer :
La première ligne va précharger l’image au survol, et la seconde l’image normale.
La première url passée en paramètre est l’image appelée, et la seconde url passée en paramètre est l’emplacement de cette image.
Maitenant réessayez, vous verrez que l’animation au survol se fait parfaitement.
La différence avec une technique de roll-over en background, rapellons-le, c’est que la première image va être indexée dans les moteurs de recherche, en tant que contenu de la page.
(cf : http://identitools.fr/webdesign/creer-un-menu-en-sprites-css )
1- La méthode est crade, j’avoue, mais l’article ne date pas d’hier 😛 (2 ans)
2- La méthode présentée ne peut pas être subsituée par celle des sprites (que présente très bien ton article). Tout simplement car il s’agit ici d’image de contenu, que nous souhaitons que google indexe. Ici rien n’est mis en background dans le CSS.
Après, mon exemple est vraiment nul à chier aussi…
Merci pour les précisions.