De soft-edge image procedure maakt een "zacht randje" voor de plaatjes op jouw pagina. De procedure valideert op de strenge JSLint-norm. Je kan de "zachtheid" van de randjes instellen met de variabelen: aantal_stapjes en pixel_breedte_stapjes. Experimenteer met de waarden om een rand naar jouw smaak te definiëren. Zoals het script nu is ingesteld zullen alle plaatjes op jouw pagina een soft edge krijgen. Maar als je alleen een geselecteerd aantal plaatjes een zachte rand wil geven, kan je in de code bij imageClass === "" tussen de aanhalings-tekens een class-naam invoeren; bijv: imageClass == "selectie" (let er op dat je in plaats van de drie =-tekens er nu slechts twee nodig hebt). Elke image die je de class "selectie" meegeeft (bijvoorbeeld <img src="jouwplaatje.jpg" class="selectie" />) zal dan een soft randje krijgen. Plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina.
<script>
/*global window: false */
var voeg_event_toe,
maak_de,
i,
soft_edge,
soft_edges = [],
d_top,
d_rechts,
d_bottom,
d_links,
set_opacity;
this.soft_edge = function() {
var aantal_stapjes = 60;
var pixel_breedte_stapjes = 2;
var imageClass = "";
var dir_top = true;
var dir_rechts = true;
var dir_bottom = true;
var dir_links = true;
var w,
h,
t,
l;
set_opacity = function(obj, o) {
if (o > 100) {
o = 100;
}
if (o < 0) {
o = 0;
}
obj = obj.style;
obj.opacity = (o / 100);
obj.MozOpacity = (o / 100);
obj.KhtmlOpacity = (o / 100);
obj.filter = "alpha(opacity=" + o + ")";
};
this.maak_de = function(obj, i) {
var o = i;
i *= pixel_breedte_stapjes;
d_top = (dir_top) ? i: 0;
d_rechts = (dir_rechts) ? w - i: w;
d_bottom = (dir_bottom) ? h - i: h;
d_links = (dir_links) ? i: 0;
obj.style.position = "absolute";
obj.style.top = t + "px";
obj.style.left = l + "px";
obj.style.clip = "rect(" + d_top + "px," + d_rechts + "px," + d_bottom + "px," + d_links + "px)";
set_opacity(obj, ((o * 100) / aantal_stapjes));
};
this.init = function() {
var img = document.getElementsByTagName("img");
var images = [];
for (i = 0; i < img.length; i++) {
if (img[i].className == imageClass || imageClass === "") {
images.push(img[i]);
}
}
for (i = 0; i < images.length; i++) {
var plaatje = images[i];
var parent = plaatje.parentNode;
w = plaatje.offsetWidth;
h = plaatje.offsetHeight;
t = plaatje.offsetTop;
l = plaatje.offsetLeft;
set_opacity(plaatje, 0);
for (var j = 1; j < aantal_stapjes; j++) {
var randje = plaatje.cloneNode(true);
soft_edges.push(randje);
maak_de(randje, j);
parent.appendChild(randje);
}
}
};
this.init();
};
this.voeg_event_toe = function(obj, type, fn) {
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn](window.event);
};
obj.attachEvent('on' + type, obj[type + fn]);
} else {
obj.addEventListener(type, fn, false);
}
};
voeg_event_toe(window, "load", soft_edge);
</script>