home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

Eén regeltje CSS, één plaatje met het id spotlight en een stukje javascript zorgen er voor dat de spotlight-procedure (geheel cross browser) werkt. Hieronder staat de code van de css en de image-tag die op deze pagina gebruikt is:
(css in de head plaatsen en de img in de body-sectie)

<!--[if IE]>
	<style type="text/css">
		#spotlight{filter:light}
	</style>
<![endif]-->


<img id="spotlight" src="spotlight-effect.jpg" alt="spotlight effect" height="299" width="200" />
		

gevolgd door het stukje javascript wat je zo laag als mogelijk op de pagina in de body-sectie moet plaatsen:

<script>
/*global window: false */
/*global spotlight: false */
/*global regel: false */
/*global schuif: false */
var afmeting_spotlight = 50;
var procent_zichtbaar = 10;
var startx = 0;
var starty = 0;
var spotlight_x,spotlight_y,t,tempx,tempy;
var IE = document.all ? true: false;
function beweeg_spotlight() {
	spotlight_x = tempx;
	spotlight_y = tempy;
	spotlight.filters.light.MoveLight(1, spotlight_x, spotlight_y, afmeting_spotlight, true);}
function haal_muispositie(e) {
	tempx = event.offsetX;
	tempy = event.offsetY;
	if (tempx < 0) {
		tempx = 0; }
	if (tempy < 0) {
		tempy = 0; }
	if (t) {
		beweeg_spotlight();	}
	return true;}
if (IE && spotlight.filters) {
	document.all.spotlight.onmousemove = haal_muispositie;
	var tempx = 0;
	var tempy = 0;}
var spotlight_x = startx;
var spotlight_y = starty;
var t = true;
if (IE && spotlight.filters) {
	spotlight.style.cursor = "hand";
	spotlight.filters.light.addAmbient(255, 255, 255, procent_zichtbaar);
	spotlight.filters.light.addPoint(startx, starty, afmeting_spotlight, 255, 255, 255, 255);}
var img_tag,ctx,canvas,de_radius,deinterval,x = 0,y = 0,gradient;
window.addEventListener("load",
function() {
	img_tag = document.getElementsByTagName('img')[0];
	canvas = document.createElement('canvas');
	canvas.style.background = "url(" + img_tag.src + ")";
	ctx = canvas.getContext('2d');
	canvas.width = img_tag.width;
	canvas.height = img_tag.height;
	de_radius = 75;
	img_tag.parentNode.replaceChild(canvas, img_tag);
	regel(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(schuif, 40);},
	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(0, 0, canvas.width, canvas.height);},
	false);
},
false);
function regel(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 old_x = 0;
var old_y = 0;
var mathpi = 0;
function schuif() {
	regel(old_x - de_radius, old_y - 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();
	old_x = x;
	old_y = y;}
</script>
		
		

cache 15-02-2011