»
EnglishFrenchVietnamese

Print - Crosshair - JavaScriptBank.com

Full version: jsB@nk » Pointer » Crosshair
URL: https://www.javascriptbank.com/crosshair-brian-gosselin.html

Crosshair © JavaScriptBank.comAdd a fun crosshair to your document! The color of the crosshair can be customized, making it suitable for any webpage.

Full version: jsB@nk » Pointer » Crosshair
URL: https://www.javascriptbank.com/crosshair-brian-gosselin.html



CSS
<style type="text/css">.hair {position:absolute;layer-background-color:black;font-size:1px;background-color:black;top:-10px;left:-10px;height:1px;width:1px;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="javascript">var NS4 = (document.layers)? true : false;var IE4 = (document.all)? true : false;var NS6 = (document.getElementById && !document.all && !document.layers)? true: false;var xhair, yhair;function resize(){if(NS4){xhair.clip.width=window.innerWidth;xhair.clip.height=1;yhair.clip.width=1;yhair.clip.height=window.innerHeight;}else{xhair.style.width=(IE4)?document.body.clientWidth:window.innerWidth;yhair.style.height=(IE4)?document.body.clientHeight:window.innerHeight;}}function movehairs(evnt){var px=(IE4)?document.body.scrollLeft:pageXOffset;var py=(IE4)?document.body.scrollTop:pageYOffset;var mx=(IE4)?event.clientX+10:evnt.pageX+10;var my=(IE4)?event.clientY+10:evnt.pageY+10;if(NS4){xhair.moveTo(px,my);yhair.moveTo(mx,py);}else{xhair.style.top=my+((IE4)?py:0);xhair.style.left=px;yhair.style.top=py;yhair.style.left=mx+((IE4)?px:0);}return false;}window.onresize=function(){if(NS4)setTimeout('history.go(0)', 400);else resize();//ADD OTHER WINDOW RESIZE EVENT HANDLERS FROM OTHER SCRIPTS HERE...}window.onload=function(){xhair=(NS4)?document.layers['xhair']:(IE4)?document.all['xhair']:document.getElementById('xhair');yhair=(NS4)?document.layers['yhair']:(IE4)?document.all['yhair']:document.getElementById('yhair');if(NS4)document.captureEvents(Event.MOUSEMOVE);document.onmousemove=movehairs;resize();//ADD OTHER ONLOAD EVENT HANDLERS FROM OTHER SCRIPTS HERE...}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div id="xhair" class="hair"></div><div id="yhair" class="hair"></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->