asp.net.ph Source Code Viewer

<html>
<head>
<title>Abakada Dynamic HTML Tutorials: Dynamic Lighting Effects</title>
<link rel="stylesheet" href="/shared/netdemos.css">
</head>

<body>
<!-- #include virtual="~/shared/top.inc" -->

<div class="header"><h2>Abakada HTML Demo: Dynamic Lighting Effects</h2></div>
<hr size=1 width=92%>

<div class="back" style="background: #9bd">
<table cellpadding=10>
<tbody>
<tr>
   <td id="flttgt" style="filter: light ( enabled=1 )">
      <img border=0 height=216 src="../shared/images/links.jpg" 
         style="height: 200px; width: 200px" width=155></td>
   <td id="msg">Move the cursor over the image and see the light track its movement. 
      Click on the image to add additional lights and watch them all track the mouseover movement.</td>
</tr>
</tbody>
</table>

</div>

<script language="JavaScript">
var numLight = 0;
var blurbs = new Array ( 
   "DHTML implements many cool interactive features. Authors are now able to better track, and respond to, user actions.", 
   "Here we are using a light filter to respond to the user. Clicking on the image will add additional cone lights.", 
   "The moveLight method is being used dynamically, it is bound to the image\'s mousemove event to track the users cursor movements", 
   "And this text is being set from the onclick event, all with very little code!" );
window.onload = setlights;
document.onclick = keyhandler;
flttgt.onmousemove=mousehandler;

// create the light collection on the fly based on current number of lights desired
function setlights ( ) {
   flttgt.filters [ 0 ].clear ( );
   flttgt.filters [ 0 ].addcone ( 0,0,5,100,100,255,255,0,60,15 );
   if ( numLight>0 ) {
      flttgt.filters [ 0 ].addcone ( 0,200,5,100,100,255,0,0,60,15 );
      if ( numLight>1 ) {
         flttgt.filters [ 0 ].addcone ( 200,200,5,100,100,0,255,255,60,15 );
         if ( numLight>2 ) {
            flttgt.filters [ 0 ].addcone ( 200,0,5,100,100,255,0,255,60,15 );
         }
      }
   }
}

// cycle from 0 to 3 for number of lights 
function keyhandler ( ) {
   numLight = ( numLight += 1 ) % 4;
   msg.innerHTML = blurbs [ numLight ];
   setlights ( );
}

// move the impact points of all current cones to the mouse x,y ( less the 80pixel offset for the table
function mousehandler ( ) {
   x = ( window.event.x - 80 );
   y = ( window.event.y - 80 );

   flttgt.filters [ 0 ].movelight ( 0,x,y,5,1 );
   if ( numLight > 0 ) {
      flttgt.filters [ 0 ].movelight ( 1,x,y,5,1 );
      if ( numLight > 1 ) {
         flttgt.filters [ 0 ].movelight ( 2,x,y,5,1 );
         if ( numLight > 2 ) {
            flttgt.filters [ 0 ].movelight ( 3,x,y,5,1 );
         }
      }
   }
}
//-->
</script>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>