Créer des rollovers d'images en noir et blanc
Voici une technique utilisant JQuery pour créer un effet en rollover sur des images. Il s'agit de créer une copie des images en modifiant les couleurs. Cette technique utilise le canevas provenant de l'HTML5. Il faut donc un navigateur récent pour que cela fonctionne. Dans le cas contraire, il y aura un effet sur l'opacité uniquement.
Feuille de styles
.img_wrapper { position:relative; overflow:hidden; display:inline-block; *display:inline; }
.img_wrapper img { position:absolute; }
.img_wrapper img.originale { z-index:500; }
.img_wrapper img.grayscale { z-index:700; } /* Fade sur cette image seulement, doit être au dessus */
.img_wrapper img.faux_grayscale { display:none; } /* Canevas non supporté */
La classe img_wrapper contiendra les images. N'oubliez pas de modifier ces styles selon vos besoins. Exemple : img_wrapper pourrait être en display:block ou encore float:left.
Code HTML
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy1.jpg" alt="" width="750" height="200" />
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy2.jpg" alt="" width="750" height="200" />
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy4.jpg" alt="" width="750" height="200" />
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy5.jpg" alt="" width="750" height="200" />
Code Javascript : fonctions de base
La fonction grayscale s'occupe de créer la copie des images en noir et blanc tandis que la fonction isCanvasSupported détecte si le navigateur supporte le canevas HTML5.
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var y = 0; y < imgPixels.height; y++){
for (var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
JQuery
Tout d'abord, on ne souhaite pas que les images soient affichées immédiatement (avant d'avoir créé l'équivalent en noir et blanc).
// Au DOM Ready
$(function(){
// On cache les images
$("img").css({opacity:0});
});
Ensuite, le reste du code JQuery doit être exécuté après que les images soient chargées. Donc, sur l'événement window.load
$(window).load(function(){
var canvasOK = isCanvasSupported();
// Clone les images
$('img').each(function(){
var el = $(this);
el.wrap("<div/>");
el.parent().addClass('img_wrapper').css({"opacity":"0.7","width":el.outerWidth(),"height":el.outerHeight()});
el.clone().addClass('originale').css({"opacity":"1"}).insertBefore(el);
if (canvasOK) {
this.src = grayscale(this.src);
el.addClass('grayscale');
}
else {
el.addClass('faux_grayscale');
}
});
// On montre les images chargées (grayscale par dessus grâce au z-index)
$(".img_wrapper img").animate({opacity:1}, 250);
/* Animation des événements de souris sur les images */
$('.img_wrapper').bind('mouseenter',function(){
var el = $(this);
el.stop().animate({opacity:1}, 250);
el.find('.grayscale').stop().animate({opacity:0}, 250);
});
$('.img_wrapper').bind('mouseleave',function(){
var el = $(this);
el.stop().animate({opacity:0.7}, 250);
el.find('.grayscale').stop().animate({opacity:1}, 250);
});
});
Télécharger le code source
Vous trouverez cet exemple ici avec le code source en entier.
