Het is een beetje lastig om op de spotlight-pagina de code te selecteren en te kopiëren. Daarom is de procedure op twee pagina's geplaatst. Klik op de link hierboven om het voorbeeld te bekijken en gebruik deze pagina om de code te kopiëren.
vervang <body> door:
<body id="spotlight">
<p><img src="data:image/png;base64," alt="spotlight-effect" id="spotlight_canvas" /></p>
-----------------------------------------------------------------------------------------------
stylesheet voor de spotlight procedure, plaats deze in de HEAD-sectie van de
pagina.
<style type="text/css">
html{
background:#111;
color:#eecc88}
canvas{
position:absolute;
top:0;
left:0}
a{
background:inherit;
color:#444;
position:absolute;
position:relative;
opacity:0.5}
a:hover{
background:inherit;
color:#bbb;
position:absolute;
position:relative;
opacity:1}
</style>
<!--[if IE]>
<style type="text/css">
body{background:#111;color:#eecc88;}
#spotlight{filter:light}
#spotlight_canvas{display:none}
</style>
<![endif]-->
-----------------------------------------------------------------------------------------------
javascript voor de spotlight procedure, plaats deze zo LAAG als mogelijk in de
BODY-sectie van de pagina.
<script>
/*global window: false */
/*global spotlight: false */
/*global regel_spotlight: false */
/*global bereken_spotlight: false */
/*global pageXOffset: false */
/*global pageYOffset: false */
var diameter_spotlight = 250;
var zichtbaar_in_procenten = 5;
var spotlight_x = 0;
var spotlight_y = 0;
var t;
var is_ie = document.all ? true: false;
function beweeg_spotlight(ev) {
spotlight.filters.light.MoveLight(1, event.clientX + (document.documentElement.scrollLeft), event.clientY + (document.documentElement.scrollTop), diameter_spotlight, 1);
}
if (is_ie && spotlight.filters) {
document.all.spotlight.onmousemove = beweeg_spotlight;
}
var t = true;
if (is_ie && spotlight.filters) {
spotlight.filters.light.addAmbient(255, 255, 255, zichtbaar_in_procenten);
spotlight.filters.light.addPoint(spotlight_x, spotlight_y, diameter_spotlight, 255, 255, 255, 255);
}
var de_img_tag,
ctx,
canvas,
de_radius,
deinterval,
x = 0,
y = 0,
gradient;
if (!is_ie) {
window.addEventListener("load",
function() {
de_img_tag = document.getElementsByTagName('img')[0];
canvas = document.createElement('canvas');
canvas.style.background = "url(" + de_img_tag.src + ")";
ctx = canvas.getContext('2d');
canvas.width = screen.width - 30;
canvas.height = screen.height + 2000;
de_radius = 250;
de_img_tag.parentNode.replaceChild(canvas, de_img_tag);
regel_spotlight(0, 0, canvas.width, canvas.height);
gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, de_radius);
gradient.addColorStop(0, "rgba(255,255,255,1)");
gradient.addColorStop(0.1, "rgba(255,255,255,0.9)");
gradient.addColorStop(0.9, "rgba(255,255,255,0.05)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
canvas.addEventListener('mouseover',
function(ev) {
deinterval = setInterval(bereken_spotlight, 20);
},
false);
canvas.addEventListener('mousemove',
function(ev) {
x = (pageXOffset + ev.clientX) - ev.target.offsetLeft - 10;
y = (pageYOffset + ev.clientY) - ev.target.offsetTop - 15;
},
false);
canvas.addEventListener('mouseout',
function(ev) {
clearInterval(deinterval);
regel_spotlight(0, 0, canvas.width, canvas.height);
},
false);
},
false);
function regel_spotlight(xc, yc, wc, hc) {
if (xc < 0) {
xc = 0;
}
if (yc < 0) {
yc = 0;
}
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0.88)";
ctx.clearRect(xc, yc, wc, hc);
ctx.fillRect(xc, yc, wc, hc);
ctx.closePath();
ctx.restore();
}
var x_oud = 0;
var y_oud = 0;
var mathpi = 0;
function bereken_spotlight() {
regel_spotlight(x_oud - de_radius, y_oud - de_radius, 2 * de_radius, 2 * de_radius);
ctx.save();
ctx.beginPath();
mathpi += Math.PI / 12;
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = gradient;
ctx.translate(x, y);
ctx.arc(0, 0, de_radius, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.restore();
x_oud = x;
y_oud = y;
}
}
</script>