Kijk eerst even naar het originele plaatje om het verschil te kunnen zien. Om een glossy effect aan een plaatje te geven, moet je de afbeelding voorzien van een class "maak_glossy". Als dan ook nog het javascript, wat hieronder staat, zo laag als mogelijk in de body-sectie van de pagina is geplaatst, zal de procedure cross browser zijn werk doen. Volgens JSLint is het script foutloos.
<p>
<a href="/javascripts/image-effects/glossy-image.html">
<img src="http://static.dns5.nl/glossy-image.jpg" class="maak_glossy" width="200" height="200" alt="glossy image" /></a>
</p>
<script>
/*global navigator: false */
/*global document: false */
/*global window: false */
var ie_browser = {
browser_versie: function () {
'use strict';
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") !== -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
var s, welke, image, i, j, radius;
if (navigator.appName === "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") < 1 && ie_browser.browser_versie() < 9) {
var is_glossy_voor_ie_tot_9 = document.namespaces ? 1 : 0;
}
if (is_glossy_voor_ie_tot_9) {
if (document.namespaces.v === undefined) {
welke = ["group", "path", "fill", "stroke", "line", "roundrect", "image"];
s = document.createStyleSheet();
for (i = 0; i < welke.length; i = i + 1) {
s.addRule("v\\:" + welke[i], "behavior: url(#default#VML);");
}
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
}
}
function haal_glossy_images(g) {
'use strict';
var a = [],
e = 0,
d = 0,
c = document.getElementsByTagName("img"),
f,
b;
for (e = 0; e < c.length; e = e + 1) {
f = c[e];
b = f.className.split(" ");
for (d = 0; d < b.length; d = d + 1) {
if (b[d] === g) {
a.push(f);
break;
}
}
}
return a;
}
function haal_glossy_class(c, b) {
'use strict';
var a = "";
for (j = 0; j < c.length; j = j + 1) {
if (c[j] !== b) {
if (a) {
a += " ";
}
a += c[j];
}
}
return a;
}
function glossy_onderkant_donker(l, f, c, e, g, k, d) {
'use strict';
var h = l.createLinearGradient(0, c, 0, c + g);
h.addColorStop(0, "rgba(0,0,0,0)");
h.addColorStop(1, "rgba(0,0,0," + d + ")");
l.beginPath();
l.moveTo(f, c);
l.lineTo(f, c + g - k);
l.quadraticCurveTo(f, c + g, f + k, c + g);
l.lineTo(f + e - k, c + g);
l.quadraticCurveTo(f + e, c + g, f + e, c + g - k);
l.lineTo(f + e, c);
l.lineTo(f, c);
l.closePath();
l.fillStyle = h;
l.fill();
}
function glossy_bovenkant_helder(l, f, c, e, g, k, d) {
'use strict';
var h = l.createLinearGradient(0, c, 0, c + g);
h.addColorStop(0, "rgba(254,254,254," + d + ")");
h.addColorStop(1, "rgba(254,254,254,0.1)");
l.beginPath();
l.moveTo(f, c + k);
l.lineTo(f, c + g - k);
l.quadraticCurveTo(f, c + g, f + k, c + g);
l.lineTo(f + e - k, c + g);
l.quadraticCurveTo(f + e, c + g, f + e, c + g - k);
l.lineTo(f + e, c + k);
l.quadraticCurveTo(f + e, c, f + e - k, c);
l.lineTo(f + k, c);
l.quadraticCurveTo(f, c, f, c + k);
l.closePath();
l.fillStyle = h;
l.fill();
}
function ronde_hoek_glossy_image(k, e, c, d, g, h, f) {
'use strict';
if (!f) {
k.beginPath();
}
k.moveTo(e, c + h);
k.lineTo(e, c + g - h);
k.quadraticCurveTo(e, c + g, e + h, c + g);
k.lineTo(e + d - h, c + g);
k.quadraticCurveTo(e + d, c + g, e + d, c + g - h);
k.lineTo(e + d, c + h);
k.quadraticCurveTo(e + d, c, e + d - h, c);
k.lineTo(e + h, c);
k.quadraticCurveTo(e, c, e, c + h);
if (!f) {
k.closePath();
}
}
function start_glossy_procedure() {
'use strict';
var c = haal_glossy_images("maak_glossy"),
g,
f,
e,
d,
l = null,
o = null,
m = 0.25,
n = "",
b = "",
h = null,
k = 0;
for (i = 0; i < c.length; i = i + 1) {
g = c[i];
f = g.parentNode;
e = document.createElement("canvas");
if (e.getContext && g.width >= 16 && g.height >= 16) {
n = g.className.split(" ");
m = 0.25;
l = 0;
b = haal_glossy_class(n, "maak_glossy");
e.className = b;
e.style.cssText = g.style.cssText;
e.style.height = g.height + "px";
e.style.width = g.width + "px";
e.height = g.height;
e.width = g.width;
e.src = g.src;
e.alt = g.alt;
if (g.id !== "") {
e.id = g.id;
}
if (g.title !== "") {
e.title = g.title;
}
if (g.getAttribute("onclick") !== "") {
e.setAttribute("onclick", g.getAttribute("onclick"));
}
h = Math.min(e.width, e.height) / 2;
m = l > 0 ? Math.min(Math.max(l, 20), 50) / 100 : m;
l = Math.max(Math.round(h * m), 4);
radius = l;
k = l / 4;
o = l * 0.75;
d = e.getContext("2d");
f.replaceChild(e, g);
d.clearRect(0, 0, e.width, e.height);
if (window.opera) {
d.globalCompositeOperation = "destination-out";
ronde_hoek_glossy_image(d, 0, 0, e.width, e.height, radius);
d.fillStyle = "rgba(0,0,0,1)";
d.fill();
d.clip();
d.clearRect(0, 0, e.width, e.height);
d.restore();
ronde_hoek_glossy_image(d, 0, 0, e.width, e.height, radius);
d.clip();
d.globalCompositeOperation = "source-over";
} else {
ronde_hoek_glossy_image(d, 0, 0, e.width, e.height, radius);
d.clip();
}
d.clearRect(0, 0, e.width, e.height);
d.drawImage(g, 0, 0, e.width, e.height);
glossy_bovenkant_helder(d, k, k, e.width - (2 * (k)), (e.height / 2) - k, o, 0.73);
glossy_onderkant_donker(d, 0, (e.height / 2), e.width, (e.height / 2), o, 0.5);
e.style.visibility = "visible";
}
}
}
function glossy_voor_ie_tot_9() {
'use strict';
var p = haal_glossy_images("maak_glossy"),
v,
d = null,
g = null,
k = 0.25,
a = "",
w = "",
h = null,
e = 0,
o = 0,
m = 0,
u = null,
q = null,
r = 0,
f,
n,
l,
x;
for (i = 0; i < p.length; i = i + 1) {
image = p[i];
v = image.parentNode;
f = "";
n = "";
l = "";
x = "";
if (image.width >= 16 && image.height >= 16) {
a = image.className.split(" ");
k = 0.25;
d = 0;
w = haal_glossy_class(a, "maak_glossy");
o = image.width;
m = image.height;
h = Math.min(o, m) / 2;
k = d > 0 ? Math.min(Math.max(d, 20), 50) / 100 : k;
d = Math.round(45 * k);
radius = d;
e = Math.round(Math.max(Math.round(h * k), 4) / 4);
g = d * 0.75;
r = (image.currentStyle.display.toLowerCase() === "block") ? "block" : "inline-block";
u = document.createElement(['<var style="zoom:1;overflow:hidden;display:' + r + ";width:" + o + "px;height:" + m + 'px;padding:0;">'].join(""));
q = image.currentStyle.styleFloat.toLowerCase();
r = (q === "left" || q === "right") ? "inline" : r;
f = '<v:group style="display:' + r + "; margin:-1px 0 0 -1px;padding:0;position:relative;width:" + o + "px;height:" + m + 'px;" coordsize="' + o + "," + m + '">' + x;
n = '<v:roundrect arcsize="' + radius + '%" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="margin:-1px 0 0 -1px;padding:1px;display:block;position:absolute;top:0px;left:0px;width:' + o + "px;height:" + m + 'px;"><v:fill src="' + image.src + '" type="frame" /></v:roundrect><v:roundrect arcsize="' + (g * 2) + '%" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="margin:-1px 0 0 -1px;padding:0;display:block;position:absolute;top:' + e + "px;left:" + e + "px;width:" + (o - (2 * e)) + "px;height:" + ((m / 2) - e) + 'px;"><v:fill method="linear" type="gradient" angle="0" color="#ffffff" opacity="0.1" color2="#ffffff" o:opacity2="0.73" /></v:roundrect><v:roundrect arcsize="' + (radius * 2) + '%" strokeweight="0" filled="t" stroked="f" fillcolor="#000000" style="margin:-1px 0 0 -1px;padding:0;display:block;position:absolute;top:' + ((m / 2)) + "px;left:px;width:" + o + "px;height:" + ((m / 2)) + 'px;"><v:fill method="linear" type="gradient" angle="180" color="#000000" opacity="0.0" color2="#000000" o:opacity2="0.5" /></v:roundrect></v:group>';
u.innerHTML = f + l + n;
u.className = w;
u.style.cssText = image.style.cssText;
u.style.visibility = "visible";
u.src = image.src;
u.alt = image.alt;
u.width = image.width;
u.height = image.height;
if (image.id !== "") {
u.id = image.id;
}
if (image.title !== "") {
u.title = image.title;
}
v.replaceChild(u, image);
}
}
}
var glossy_load = window.onload;
window.onload = function () {
'use strict';
if (glossy_load) {
glossy_load();
}
if (is_glossy_voor_ie_tot_9) {
glossy_voor_ie_tot_9();
} else {
start_glossy_procedure();
}
};
</script>