css/image-effects/round-image-css.html | php/image-effects/ronde-afbeelding.html | javascripts/image-effects/ronde-plaatjes.html
Ook met javascript is het mogelijk om plaatjes "rond"te maken. Deze procedure maakt er ook nog een soft edge omheen (een zacht randje). Voor IE kan je niets meer instellen, maar voor de strict browsers kan je nog de rand manipuleren met de variablen: rond_stapjes en stap_px_breedte. Zowel in het script als in de html-code moet de correcte hoogte en breedte, van de afbeelding(en) zijn ingevuld. Als je de dikke ronde rand om het plaatje niet mooi vindt, kan je die eenvoudig verwijderen door de border-code uit het script te verwijderen, of de border-dikte op 0 (nul) te zetten. De procedure valideert op alle mogelijke manieren en is geheel cross browser. Plaats het javascript zo laag als mogelijk in de body-sectie van de pagina en de html-code voor het plaatje, op de plaats in de body waar het (plaatje met effect) zichtbaar moet worden.
<p>
<img style="background:url('rond-plaatje.jpg');" alt="ronde afbeelding" width="180" height="180" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' />
</p>
<script>
/*global window: false */
var breedte_plaatje = 180;
var hoogte_plaatje = 180;
var de_css_code = "",
stijl_element;
var stricte_browser = document.namespaces ? 0: 1;
if (!stricte_browser) {
de_css_code = "img{filter:progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=100,finishOpacity=0);}";
}
de_css_code = de_css_code + "img{border:20px solid black;width:" + breedte_plaatje + " 180px;height:" + hoogte_plaatje + "px;border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;-webkit-border-radius:50%;};";
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
if (stricte_browser) {
var addEvent,
zet,
i,
een_soft_edge,
zachte_rand_array = [],
dt,
dr,
db,
dl,
set_opacity;
this.een_soft_edge = function() {
var rond_stapjes = 130;
var stap_px_breedte = 2;
var imageClass = "";
var naar_boven = true;
var naar_rechts = true;
var naar_beneden = true;
var naar_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.zet = function(obj, i) {
var o = i;
i *= stap_px_breedte;
dt = (naar_boven) ? i: 0;
dr = (naar_rechts) ? w - i: w;
db = (naar_beneden) ? h - i: h;
dl = (naar_links) ? i: 0;
obj.style.position = "absolute";
obj.style.top = t + "px";
obj.style.left = l + "px";
obj.style.clip = "rect(" + dt + "px," + dr + "px," + db + "px," + dl + "px)";
set_opacity(obj, ((o * 100) / rond_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 image = images[i];
var parent = image.parentNode;
w = image.offsetWidth;
h = image.offsetHeight;
t = image.offsetTop;
l = image.offsetLeft;
set_opacity(image, 0);
for (var j = 1; j < rond_stapjes; j++) {
var edge = image.cloneNode(true);
zachte_rand_array.push(edge);
zet(edge, j);
parent.appendChild(edge);
}
}
};
this.init();
};
this.addEvent = 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);
}
};
addEvent(window, "load", een_soft_edge);
}
</script>