My Little Scripts - xray.html

Scripts.com - Get the best scripts NOW!
HotScripts.com - Over 10 web rings.
more links...

Index News Samples Downloads E-Mail me Forum Sign Up

XRAY.HTML

With the aid of DHTML, you can create playful web pages where the content changes as someone moves the mouse pointer around.

This is accomplished by superimposing the content of two divs, and making one invisible by clipping it. Then the mouse move handler is modified to create a clip region depending on the location of the mouse pointer. This can create the impression that there is an x-ray being directed at the web page, revealing hidden content.

<html>

<head>
<title></title>

<script language="javascript">
function mouseMove(e)
         {
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if(navigator.appName == 'Netscape' && e.target!=document) routeEvent(e);

         Clip(Hidden, 0, y + 10, WindowWidth(), 60);

         return(true);
         }

function Clip(layer, x, y, w, h)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
             {
             layer.style.clip = 'rect(' + y + ' ' + (x + w) + ' ' + (y + h) + ' ' + x + ')';
             }
           if(parseInt(navigator.appVersion) == 4)
             {
             layer.clip.left = x;
             layer.clip.top = y;
             layer.clip.right = x + w;
             layer.clip.bottom = y + h;
             }
           }
         else
           {
           layer.style.clip = 'rect(' + y + ' ' + (x + w) + ' ' + (y + h) + ' ' + x + ')';
           }
         }

function GetLayer(layer)
         {
         var ReturnLayer = null;
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              ReturnLayer = document.getElementById(layer);
           else
              eval('ReturnLayer = document.' + layer + ';');
           }
         else
           {
           eval('ReturnLayer = document.all.' + layer + ';');
           }
         return ReturnLayer;
         }

function WindowWidth()
         {
         if(navigator.appName == 'Netscape')
           return window.innerWidth;
         else
           return document.body.clientWidth;
         }

function init()
         {
         document.onmousemove = mouseMove;
         if(navigator.appName == 'Netscape') document.captureEvents(Event.MOUSEMOVE);

         Hidden = GetLayer('back');
         }
</script>
</head>

<body onload="init();" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">

<div id="front" style="position:absolute; width:100%; height:100%;">
     <table align="center" height="100%">
     <tr>
     <td width="600" height="100%" style="font-size:24pt;">
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     H<font color="ffffff">idden Tex</font>t
     </td>
     </tr>
     </table>
</div>

<div id="back" style="position:absolute; clip:rect(0 0 0 0); width:100%; height:100%;">
     <table align="center" height="100%">
     <tr>
     <td width="600" height="100%" style="font-size:24pt;">
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     H<font color="000000">idden Tex</font>t
     </td>
     </tr>
     </table>
</div>

</body>
</html>