Er is geen CSS ondersteuning.
Als je de demo van het spotlight-effect leuk vindt, kan je op deze pagina de broncode copy/paste'n. Als je de spotlight nog niet in werking hebt gezien, raad ik je aan om even op de link klik hier voor demo (hierboven) te klikken. Over de procedure valt verder weinig te vertellen. JSLint is geheel tevreden en de pagina valideert natuurlijk ook voor html5. Het lijkt mij voor jou het makkelijkst als ik de gehele pagina met de spotlight-procedure (althans de code daarvan) hieronder plaats, zodat jij alleen maar de code naar jouw webruimte hoeft te kopieren om een perfect werkende pagina te krijgen. De broncode is, voor wat betreft de variabelen, doorzichtig opgebouwd. Het is eenvoudig om alles te wijzigen naar jouw eigen smaak.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>spotlight script</title>
<meta name='keywords' content="spotlight,script,javascript" />
<meta name='description' content="spotlight script. een ander voorbeeld. ditmaal een hele pagina met een licht-effect." />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<meta name="author" content="Bobik"><meta name="language" content="nederlands"><style type="text/css" media="screen">body{margin-bottom:60em;color:#E5CC92;background:#020;font-family:Helvetica,Geneva,Arial,sans-serif;font-size:16px}a{text-decoration:none;outline:0}img{border:0}.tekst{color:#bbb;background:#040;text-align:center;padding-bottom:0.5em}ul{margin-left:100px;display:block;width:16em;color:#82B282;background:#030;padding:0.3em;list-style-type:none;border-right:1px solid #004000;border-top:1px solid #004000}p{margin-left:100px}p{margin-right:40%}.css-check{display:none}li a{color:#82B282;background:#003300;padding-left:0.5em}li a:hover{color:#E5CC92;background:#003300}.eenlink,.knop,.tekst{color:#aaa;background:#040;padding-left:0.5em;padding-right:0.5em;border-right:1px solid #050;border-top:1px solid #050}.eenlink:hover,.knop:hover{color:#E5CC92;background:#040}.knop{color:#AABD8C;background:#040;font-weight:bold}.groter{font-size:1.4em}.kleiner{font-size:0.7em}.lager{margin-bottom:5em}#logo{color:#436E00;background:#040;position:absolute;right:1.2em;font-weight:bold}</style>
<style type="text/css">
canvas{position:absolute;top:0;left:0}
h1{margin-left:100px}
.pop-up{position:absolute;position:relative;opacity:0.5}
.pop-up:hover{position:absolute;position:relative;opacity:1}
</style>
<!--[if IE]>
<style type="text/css">
body{background:#020;color:#E5CC92;margin-bottom:0}
.ie{color:#E5CC92;background:#020;height:2000px}
#spotlight{filter:light}
#spotlight_canvas{display:none}
</style>
<![endif]-->
</head>
<body id="spotlight">
<img id="spotlight_canvas" src="blank.gif" alt="spotlight effect" />
<div class="ie">
<div class="tekst">
<span class="groter"><strong>spotlight script</strong></span><br />
<span class="kleiner"><strong>pagina met een licht-effect</strong></span>
</div>
<p class="lager">
<a href="http://www.dns5.nl/" rel="nofollow" title=" hoofd pagina "><span class="knop">home</span></a> |
<a href="http://www.dns5.nl/site-index.php" rel="nofollow" title=" site-index "><span class="knop">index</span></a> |
<a href="http://www.dns5.nl/alle-scripts-en-code.html" rel="nofollow" title=" hoofd-menu "><span class="knop">menu</span></a> |
<a href="http://www.dns5.nl/help.html" rel="nofollow" title=" help "><span class="knop">help</span></a>
</p>
<p class="css-check">Er is geen CSS ondersteuning.</p>
<noscript>
<p>Jouw javascript is uitgeschakeld. Sommige onderdelen van deze site zijn nu niet operationeel.</p>
</noscript>
<ul>
<li><a href="http://www.dns5.nl/javascript/" title=" javascript menu ">klik hier voor het javascript-menu</a></li>
</ul>
<h1><a href="http://www.dns5.nl/javascript/spotlight-script-code.html" title=" licht aan "><span class="eenlink pop-up">klik hier voor licht</span></a></h1>
<p>
tekst van de spotlight-procedure.
</p>
</div>
<script>
/*global window: false */
/*global spotlight: false */
/*global regel: false */
/*global schuif: false */
/*global pageXOffset: false */
/*global pageYOffset: false */
var afmeting_spotlight = 250;
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(ev) {
spotlight.filters.light.MoveLight(1,event.offsetX, event.offsetY, afmeting_spotlight, true);}
function haal_muispositie(e) {
beweeg_spotlight();
return true;}
if (IE && spotlight.filters) {
document.all.spotlight.onmousemove = haal_muispositie;}
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 = screen.width-30;
canvas.height = screen.height+1000;
de_radius = 250;
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, 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(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>
</body>
</html>
cache 27-02-2011