Spotlight

<code><!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>
</code>