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 :

image normal roll over jquery
image survol hover

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:

(function($){
    $(".action").mouseover(function(){
        $(this).attr("src", "http://pathtoimage/imageausurvol.jpg");
    }).mouseout(function(){
        $(this).attr("src", "http://pathtoimage/imagenormale.jpg");
    });
})(jQuery);
Switch des images

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.

(function($) {
    var cache = [];
    $.preLoadImages = function() {
        var args_len = arguments.length;
        for (var i = args_len; i--;) {
            var cacheImage = document.createElement('img');
            cacheImage.src = arguments[i];
            cache.push(cacheImage);
        }
    }
})(jQuery)
Cache des 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 :

jQuery.preLoadImages("http://pathtoimage/imageausurvol.jpg", "http://pathtoimage/imageausurvol.jpg");
jQuery.preLoadImages("http://pathtoimage/imagenormale.jpg", "http://pathtoimage/imagenormale.jpg");
Préchargement des mages

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.

Contacter l'auteur :

willy bahuaud

Je suis Willy Bahuaud, intégrateur et développeur, spécialiste de WordPress.
Besoin de mes services ? Écrivez-moi !

3 commentaires

  1. Par Nicolas — Il y a 5 années
    J’ai du mal à comprendre, la méthode sert en fait à précharger l’image du survol c’est ça ? Pourquoi ne pas utiliser des sprites CSS tout simplement ?
    (cf : http://identitools.fr/webdesign/creer-un-menu-en-sprites-css )
  2. Par Willy Bahuaud — Il y a 5 années
    Alors en fait :

    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…

  3. Par Identitools — Il y a 5 années
    Ah, effectivement je n’ai pas fait attention à la date de publication, mea cupla 🙂

    Merci pour les précisions.

Commenter