Mouseover-Ruler - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Mouseover-Ruler

Two dynamic horizontal and vertical rulers track the mouse and grow thicker whenever the mouse moves over a textlink. Crossbrowser NN4x and IE4x.


Insert into <HEAD>
<STYLE TYPE="text/css"> <!-- A { font-family: Arial,Helvetica,sans-serif; color: #0000FF;text-decoration:underline} A:visited { font-family: Arial,Helvetica,sans-serif; color: #0000FF} A:hover { font-family: Arial,Helvetica,sans-serif; color: #0000FF} --> </STYLE> <script> <!-- Beginning of JavaScript - var x = -50 var y = -50 var filteractive=0 function filteraktivator(filterstatus) { filteractive=filterstatus } function positionrulers() { if(document.layers) { document.vertical.left=x document.horizontal.top=y if (filteractive==1) { document.vertical2.left=x document.horizontal2.top=y } if (filteractive==0) { document.vertical2.left=-50 document.horizontal2.top=-50 } } if(document.all) { document.all.vertical.style.posLeft=x document.all.horizontal.style.posTop=y if (filteractive==1) { document.all.vertical2.style.posLeft=x document.all.horizontal2.style.posTop=y } if (filteractive==0) { document.all.vertical2.style.posLeft=-50 document.all.horizontal2.style.posTop=-50 } } timer =setTimeout("positionrulers()",20) } function handlerMM(e){ x = (document.layers) ? e.pageX : event.clientX y = (document.layers) ? e.pageY : event.clientY } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; // - End of JavaScript - --> </script>

Insert into <BODY>
<body id="thisbody" OnLoad=positionrulers()> <DIV id="horizontal" style="position:absolute; left:-50px"><img src="ruler1511.gif" width=1600 height=1></DIV> <DIV id="vertical" style="position:absolute; top:-50px"><img src="ruler1511.gif" width=1 height=1600></DIV> <DIV id="horizontal2" style="position:absolute; left:-50px"><img src="ruler1511.gif" width=1600 height=7></DIV> <DIV id="vertical2" style="position:absolute; top:-50px"><img src="ruler1511.gif" width=7 height=1600></DIV>

Other Options