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:

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

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)

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");

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.