J'essaie de faire un effet de multiplication de survol sur une image. Im suivant ce tutoriel:Toile multipliez l'effet hover
Démo: http://albertogasparin.it/demo/multiply-filter/
http://albertogasparin.it/articles/2011/05/html5-multiply-filter-canvas/
Le problème que j'ai est que je ne pas savoir comment passer à fonctionner il fonctionne sur le vol stationnaire au-dessus de la . "id =" multiply_hover », parce qu'en ce moment le filtre se multiplient apparaît après chargement de la page
Ceci est mon balisage:
<div class="item">
<img id="multiply_hover" src="img/coleccionesII_1.jpg" alt="coleccionesII_1" width="195" height="343">
<div class="item_info">
<div class="item_text">
<a href="javascript:void(0)">SEDA BLOUSE BOLSILLOS</a>
<a href="javascript:void(0)">CREP PANTALÓN</a>
<a href="javascript:void(0)">Zapato Rojo</a>
</div>
</div>
</div>
Avec ce script:
var multiplyFilter = (function() {
//** private vars **//
var multiplyColor,
imageBottom, imageId,
canvas;
//** private functions **//
function createCanvas() {
canvas = document.createElement('canvas');
canvas.width = imageBottom.width;
canvas.height = imageBottom.height;
imageBottom.parentNode.insertBefore(canvas, imageBottom);
// no canvas support?
if (!canvas.getContext) { return; }
draw();
}
function draw() {
var context, imgData, pix,
w = imageBottom.width,
h = imageBottom.height;
// get 2d context
context = canvas.getContext('2d');
// draw the image on the canvas
context.drawImage(imageBottom, 0, 0);
// Get the CanvasPixelArray from the given coordinates and dimensions.
imgData = context.getImageData(0, 0, w, h);
pix = imgData.data;
// Loop over each pixel and change the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
// pix[i+3] is alpha channel (ignored)
// another check to see if image is still empty
if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
canvas.parentNode.removeChild(canvas);
setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
return false;
}
}
// Draw the result on the canvas
context.putImageData(imgData, 0, 0);
}
//** helper function **//
function multiplyPixels(topValue, bottomValue) {
// the multiply formula
return topValue * bottomValue/255;
}
//** public functions **//
return {
init : function(imgId, color) {
imageId = imgId;
imageBottom = document.getElementById(imageId);
multiplyColor = color;
// lauch the draw function as soon as the image is loaded
if(imageBottom && imageBottom.clientWidth > 50) { // image loaded
createCanvas();
} else { // not yet ready
setTimeout(function() { multiplyFilter.init(imageId, color); }, 1000);
}
}
}
})();
multiplyFilter.init('multiply_hover', [0, 0, 210]);
J'essayé d'utiliser quelque chose comme ça, qui sur des œuvres de vol stationnaire, mais pas bien du tout, parce que cela crée sur chaque hover un nouvel élément de toile:
// Hover effect
$(".item").bind('mouseenter', function() {
$(this).children(".item_info").fadeIn();
multiplyFilter.init('multiply_hover', [0, 0, 210]);
});
$(".item").bind('mouseleave', function() {
$(this).children(".item_info").fadeOut();
});
Des idées sur la façon de passer correctement la fonction en vol stationnaire?