JavaScripts -> Mauseffekte -> Spotlight-Effekt

Durch dieses Spotlight ist nur ein kleiner Bereich der Website zu sehen. Benötigt die GIF-Datei spotlight.gif.

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

in den <head>-Bereich:

<script type="text/javascript">
<!--
var mousex=0;
var mousey=0;

function capturemaus(nsevent) {
if(window.event) {
mousex=window.event.clientX;
mousey=window.event.clientY;
}
else {
mousex=nsevent.pageX;
mousey=nsevent.pageY;
}
document.getElementById('spot').style.left=(mousex-50)+"px"
document.getElementById('spot').style.top=(mousey-50)+"px"
document.getElementById('c02').style.width=(((mousex-50)>0)?(mousex-50):0)+"px"
document.getElementById('c01').style.height=(((mousey-50)>0)?(mousey-50):0)+"px"
document.getElementById('c03').style.left=(mousex+50)+"px"
document.getElementById('c04').style.top=(mousey+50)+"px"
}

document.onmousemove=capturemaus;
//-->
</script>
<style type="text/css">
<!--
div.cover {
position:absolute;
background-color:#000000;
}

img.cover {
position:absolute;
}
-->
</style>

und in den <body>-Bereich:

<div class="cover" id="c01" style="left:0px; top:0px; width:100%; height:50px; font-size:0px"></div>
<div class="cover" id="c02" style="left:0px; top:0px; width:50px; height:100%"></div>
<div class="cover" id="c03" style="left:150px; top:0px; width:100%; height:100%"></div>
<div class="cover" id="c04" style="left:0px; top:150px; width:100%; height:100%"></div>
<img class="cover" id="spot" src="spotlight.gif" alt="" style="left:50px; top:50px; width:100px; height:100px">