css/wet-floor-effect.html | javascript/wet-floor-effect.html | php/wet-floor-effect | php/natte-vloer-effect | imagick/natte-vloer-effect
Plaats het onderstaande javascript in de head-sectie van jouw pagina. Als je dan een image de class natte_vloer meegeeft zal de afbeelding een "wet floor" krijgen. Je kan de (default)opacity (in het script) instellen met de variabele standaard_doorzichtigheid en de hoogte van het effect met de variabele standaard_hoogte. Het script valideert volgens de strenge JSLint-norm.
<p>
<img src="http://static.dns5.nl/wet-floor.jpg" class="natte_vloer" />
</p>
<script>
/*global window: false */
var verhoog_1,
verhoog_2,
rt_hoogte = null;
if (!document.myGetElementsByClassName) {
document.myGetElementsByClassName = function(className) {
var de_loten = document.getElementsByTagName('*') || document.all,
onderdelen = [];
for (verhoog_1 = 0; verhoog_1 != de_loten.length; verhoog_1++) {
var een_loot = de_loten[verhoog_1],
classNames = een_loot.className.split(' ');
for (verhoog_2 = 0; verhoog_2 != classNames.length; verhoog_2++) {
if (classNames[verhoog_2] == className) {
onderdelen.push(een_loot);
break;
}
}
}
return onderdelen;
};
}
var de_opties,
wet_floor = {
standaard_hoogte: 0.6,
standaard_doorzichtigheid: 0.5,
add: function(plaatje, de_keuzes) {
wet_floor.remove(plaatje);
de_opties = {
"height": wet_floor.standaard_hoogte,
"opacity": wet_floor.standaard_doorzichtigheid
};
if (de_keuzes) {
for (var verhoog_1 in de_opties) {
if (!de_keuzes[verhoog_1]) {
de_keuzes[verhoog_1] = de_opties[verhoog_1];
}
}
} else {
de_keuzes = de_opties;
}
try {
var d = document.createElement('div'),
p = plaatje,
klasse = p.className.split(' '),
nieuwe_klassen = '';
for (verhoog_2 = 0; verhoog_2 != klasse.length; verhoog_2++) {
if (klasse[verhoog_2] != "natte_vloer") {
if (nieuwe_klassen) {
nieuwe_klassen += ' ';
}
nieuwe_klassen += klasse[verhoog_2];
}
}
var hoogte_spiegel = Math.floor(p.height * de_keuzes.height),
div_hoogte = Math.floor(p.height * (1 + de_keuzes.height)),
breedte_spiegel = p.width;
if (document.all) {
if (p.parentElement.tagName == 'A') {
d = document.createElement('a');
d.href = p.parentElement.href;
}
d.className = nieuwe_klassen;
p.className = 'gespiegeld';
d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';
var wet_floor_s = document.createElement('img');
wet_floor_s.src = p.src;
wet_floor_s.style.width = breedte_spiegel + 'px';
wet_floor_s.style.display = 'block';
wet_floor_s.style.height = p.height + "px";
wet_floor_s.style.marginBottom = "-" + (p.height - hoogte_spiegel) + 'px';
wet_floor_s.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=' + (de_keuzes.opacity * 100) + ', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' + (de_keuzes.height * 100) + ')';
d.style.width = breedte_spiegel + 'px';
d.style.height = div_hoogte + 'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(wet_floor_s);
} else {
var kanvas = document.createElement('canvas');
if (kanvas.getContext) {
d.className = nieuwe_klassen;
p.className = 'gespiegeld';
d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';
var alle_inhoud = kanvas.getContext("2d");
kanvas.style.height = hoogte_spiegel + 'px';
kanvas.style.width = breedte_spiegel + 'px';
kanvas.height = hoogte_spiegel;
kanvas.width = breedte_spiegel;
d.style.width = breedte_spiegel + 'px';
d.style.height = div_hoogte + 'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(kanvas);
alle_inhoud.save();
alle_inhoud.translate(0, plaatje.height - 1);
alle_inhoud.scale(1, -1);
alle_inhoud.drawImage(plaatje, 0, 0, breedte_spiegel, plaatje.height);
alle_inhoud.restore();
alle_inhoud.globalCompositeOperation = "destination-out";
var gradient = alle_inhoud.createLinearGradient(0, 0, 0, hoogte_spiegel);
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - de_keuzes.opacity) + ")");
alle_inhoud.fillStyle = gradient;
alle_inhoud.rect(0, 0, breedte_spiegel, hoogte_spiegel * 2);
alle_inhoud.fill();
}
}
} catch(e) {}
},
remove: function(plaatje) {
if (plaatje.className == "gespiegeld") {
plaatje.className = plaatje.parentNode.className;
plaatje.parentNode.parentNode.replaceChild(plaatje, plaatje.parentNode);
}
}
};
function voeg_spiegel_toe() {
var spiegel_plaatje = document.myGetElementsByClassName('natte_vloer');
for (verhoog_1 = 0; verhoog_1 != spiegel_plaatje.length; verhoog_1++) {
var doorzichtig = null,
klasse = spiegel_plaatje[verhoog_1].className.split(' ');
for (verhoog_2 = 0; verhoog_2 != klasse.length; verhoog_2++) {
if (klasse[verhoog_2].indexOf("rt_hoogte") === 0) {
rt_hoogte = klasse[verhoog_2].substring(7) / 100;
} else if (klasse[verhoog_2].indexOf("doorzichtig") === 0) {
doorzichtig = klasse[verhoog_2].substring(8) / 100;
}
}
wet_floor.add(spiegel_plaatje[verhoog_1], {
height: rt_hoogte,
opacity: doorzichtig
});
}
}
var laatste_keer = window.onload;
window.onload = function() {
if (laatste_keer) {
laatste_keer();
}
voeg_spiegel_toe();
};
</script>