Plaats het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina en geef elk plaatje, wat je ronde hoeken wilt geven, de class "rond". Als voorbeeld:
<img src="rounded-corners.jpg" alt="rounded corners" width="213" height="150" class="rond" />
Het javascript is foutloos volgens de strenge JSLint-norm, en ook de rest van de pagina is valide voor wat bertreft de HTML(5).
<script>
/*global document: false */
/*global window: false */
/*global navigator: true */
var nieuw_ie = window.navigator.systemLanguage && (!document.documentMode || document.documentMode < 9) ? 1 : 0;
var oud_ie = nieuw_ie && document.namespaces ? 1 : 0;
var s, welke, image, i, j, radius;
if (navigator.appName === "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") < 1) {
var is_explorer = document.namespaces ? 1 : 0;
}
if (is_explorer) {
if (document.namespaces.v === undefined) {
welke = ["group", "path", "fill", "stroke", "line", "roundrect", "image"];
s = document.createStyleSheet();
for (i = 0; i < welke.length; i++) {
s.addRule("v\\:" + welke[i], "behavior: url(#default#VML);");
}
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
}
}
function haal_plaatjes(vandeklas) {
var de_elementen = [],
i = 0,
j = 0,
kinderenvandeklas = document.getElementsByTagName("img"),
hetkind, de_klasnamen;
for (i = 0; i < kinderenvandeklas.length; i++) {
hetkind = kinderenvandeklas[i];
de_klasnamen = hetkind.className.split(" ");
for (j = 0; j < de_klasnamen.length; j++) {
if (de_klasnamen[j] === vandeklas) {
de_elementen.push(hetkind);
break;
}
}
}
return de_elementen;
}
function haal_de_klas(klasse, string) {
var ff = "";
for (j = 0; j < klasse.length; j++) {
if (klasse[j] !== string) {
if (ff) {
ff += " ";
}
ff += klasse[j];
}
}
return ff;
}
function ronde_hoek(rond_, a, b, breedte, hoogte, deradius, geenpad) {
if (!geenpad) {
rond_.beginPath();
}
rond_.moveTo(a, b + deradius);
rond_.lineTo(a, b + hoogte - deradius);
rond_.quadraticCurveTo(a, b + hoogte, a + deradius, b + hoogte);
rond_.lineTo(a + breedte - deradius, b + hoogte);
rond_.quadraticCurveTo(a + breedte, b + hoogte, a + breedte, b + hoogte - deradius);
rond_.lineTo(a + breedte, b + deradius);
rond_.quadraticCurveTo(a + breedte, b, a + breedte - deradius, b);
rond_.lineTo(a + deradius, b);
rond_.quadraticCurveTo(a, b, a, b + deradius);
if (!geenpad) {
rond_.closePath();
}
}
function start_rounded_corners() {
var alleplaatjes = haal_plaatjes("rond"),
image, hetobj, canvas, context, rekenuit = null,
desradius = null,
defactor = 0.25,
groteklasse = "",
nieuweklasse = "",
stevig_dimmen = null,
offset = 0;
for (i = 0; i < alleplaatjes.length; i++) {
image = alleplaatjes[i];
hetobj = image.parentNode;
canvas = document.createElement("canvas");
if (canvas.getContext && image.width >= 16 && image.height >= 16) {
groteklasse = image.className.split(" ");
defactor = 0.25;
rekenuit = 0;
nieuweklasse = haal_de_klas(groteklasse, "rond");
canvas.className = nieuweklasse;
canvas.style.cssText = image.style.cssText;
canvas.style.height = image.height + "px";
canvas.style.width = image.width + "px";
canvas.height = image.height;
canvas.width = image.width;
canvas.src = image.src;
canvas.alt = image.alt;
if (image.id !== "") {
canvas.id = image.id;
}
if (image.title !== "") {
canvas.title = image.title;
}
if (image.getAttribute("onclick") !== "") {
canvas.setAttribute("onclick", image.getAttribute("onclick"));
}
stevig_dimmen = Math.min(canvas.width, canvas.height) / 2;
defactor = rekenuit > 0 ? Math.min(Math.max(rekenuit, 20), 50) / 100 : defactor;
rekenuit = Math.max(Math.round(stevig_dimmen * defactor), 4);
radius = rekenuit;
offset = rekenuit / 4;
desradius = rekenuit * 0.75;
context = canvas.getContext("2d");
hetobj.replaceChild(canvas, image);
context.clearRect(0, 0, canvas.width, canvas.height);
if (window.opera) {
context.globalCompositeOperation = "destination-out";
ronde_hoek(context, 0, 0, canvas.width, canvas.height, radius);
context.fillStyle = "rgba(0,0,0,1)";
context.fill();
context.clip();
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
ronde_hoek(context, 0, 0, canvas.width, canvas.height, radius);
context.clip();
context.globalCompositeOperation = "source-over";
} else {
ronde_hoek(context, 0, 0, canvas.width, canvas.height, radius);
context.clip();
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
canvas.style.visibility = "visible";
}
}
}
function start_rounded_corners_ie() {
var alleplaatjes = haal_plaatjes("rond"),
hetobj,
rekenuit = null,
desradius = null,
defactor = 0.25,
groteklasse = "",
nieuweklasse = "",
stevig_dimmen = null,
offset = 0,
width = 0,
height = 0,
rond_vml = null,
flt = null,
display = 0,
de_kop, eronder, vullen, tijdelijk;
for (i = 0; i < alleplaatjes.length; i++) {
image = alleplaatjes[i];
hetobj = image.parentNode;
de_kop = "";
eronder = "";
vullen = "";
tijdelijk = "";
if (image.width >= 16 && image.height >= 16) {
groteklasse = image.className.split(" ");
defactor = 0.25;
rekenuit = 0;
nieuweklasse = haal_de_klas(groteklasse, "rond");
width = image.width;
height = image.height;
stevig_dimmen = Math.min(width, height) / 2;
defactor = rekenuit > 0 ? Math.min(Math.max(rekenuit, 20), 50) / 100 : defactor;
rekenuit = Math.round(45 * defactor);
radius = rekenuit;
offset = Math.round(Math.max(Math.round(stevig_dimmen * defactor), 4) / 4);
desradius = rekenuit * 0.75;
display = (image.currentStyle.display.toLowerCase() === "block") ? "block" : "inline-block";
rond_vml = document.createElement(['<var style="zoom:1;overflow:hidden;display:' + display + ";width:" + width + "px;height:" + height + 'px;padding:0;">'].join(""));
flt = image.currentStyle.styleFloat.toLowerCase();
display = (flt === "left" || flt === "right") ? "inline" : display;
de_kop = '<v:group style="display:' + display + "; margin:-1px 0 0 -1px;padding:0;position:relative;width:" + width + "px;height:" + height + 'px;" coordsize="' + width + "," + height + '">' + tijdelijk;
eronder = '<v:roundrect arcsize="' + radius + '%" strokeweight="0" stroked="f" style="margin:-1px 0 0 -1px;padding:0;display:block;position:absolute;top:0px;left:px;width:' + width + "px;height:" + height + 'px;"><v:fill src="' + image.src + '" type="frame" /></v:roundrect></v:roundrect></v:group>';
rond_vml.innerHTML = de_kop + vullen + eronder;
rond_vml.className = nieuweklasse;
rond_vml.style.cssText = image.style.cssText;
rond_vml.style.visibility = "visible";
rond_vml.src = image.src;
rond_vml.alt = image.alt;
rond_vml.width = image.width;
rond_vml.height = image.height;
if (image.id !== "") {
rond_vml.id = image.id;
}
if (image.title !== "") {
rond_vml.title = image.title;
}
hetobj.replaceChild(rond_vml, image);
}
}
}
var window_onload = window.onload;
window.onload = function () {
if (window_onload) {
window_onload();
}
if (is_explorer && oud_ie === 1) {
start_rounded_corners_ie();
} else {
start_rounded_corners();
}
};
</script>