Het grayscale script zorgt er voor dat een plaatje met "kleur" op het scherm gezet wordt in "grijs-tinten". Bij een hover zal het plaatje zijn originele kleuren weer tonen. Om dit effect op jouw pagina te "zetten" moet je een image het id "grijs" geven. Een voorbeeld kan zijn: <img alt="greyscale" id="grijs" src="image/grayscale.jpg" width="198" height="300" />. Daarna hoef je alleen nog maar het onderstaande script zo laag als mogelijk in de body-sectie van jouw pagina te plaatsen om het effect te laten werken. Het script is foutloos volgen JSLint en cross browser.
<script>
/*global window: false */
var i,
j;
function maak_grijs(image, gekleurd_plaatje) {
var de_canvas = document.createElement("canvas");
var inhoud_canvas = de_canvas.getContext("2d");
var breedte_plaatje = image.width;
var hoogte_plaatje = image.height;
de_canvas.width = breedte_plaatje;
de_canvas.height = hoogte_plaatje;
inhoud_canvas.drawImage(image, 0, 0);
var image_data = inhoud_canvas.getImageData(0, 0, breedte_plaatje, hoogte_plaatje);
for (i = 0; i < image_data.height; i++) {
for (j = 0; j < image_data.width; j++) {
var index = (i * 4) * image_data.width + (j * 4);
var rood = image_data.data[index];
var groen = image_data.data[index + 1];
var blauw = image_data.data[index + 2];
var alpha = image_data.data[index + 3];
var het_gemiddelde = (rood + groen + blauw) * 0.3333;
image_data.data[index] = het_gemiddelde;
image_data.data[index + 1] = het_gemiddelde;
image_data.data[index + 2] = het_gemiddelde;
image_data.data[index + 3] = alpha;
}
}
inhoud_canvas.putImageData(image_data, 0, 0, 0, 0, image_data.width, image_data.height);
if (gekleurd_plaatje) {
var werk_div = document.createElement("div");
werk_div.appendChild(de_canvas);
image.parentNode.appendChild(de_canvas);
}
return de_canvas.toDataURL();
}
function maakgrijs(image) {
var is_ie = document.namespaces ? 1: 0;
if (is_ie) {
image.style.zoom = 1;
image.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);";
image.onmouseover = function() {
this.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
};
image.onmouseout = function() {
this.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
};
} else {
image.mouse_over_image = image.src;
image.onload = function() {
return true;
};
image.originele_image = maak_grijs(image, false);
image.onmouseover = function() {
this.src = this.mouse_over_image;
};
image.onmouseout = function() {
this.src = this.originele_image;
};
image.src = image.originele_image;
}
}
function maak_grayscale(func) {
var oude_load = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oude_load) {
oude_load();
}
func();
};
}
}
maak_grayscale(function() {
var kleurig_plaatje = document.getElementById("grijs");
maakgrijs(kleurig_plaatje);
});
</script>