Moving light on image Script - Source Code - JsMadeEasy.com

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


Moving light on image Script



DHTML in IE 4 includes a multimedia feature that allows a light to be cast on any image and moved around. We utilized this technology to create a moving light on image script. The light continuously moves from the right edge of any image to the left, than back again. You can apply this light to ANY number of images on your page easily, with varying speed for each light. Enjoy the script!
Insert into <HEAD>
<style> <!-- #spotlight{ filter:light } --> </style>

Insert the below at the END of your document, right above the <BODY>tag.
<script language="JavaScript1.2"> if (document.all&&window.spotlight){ var x=new Array() var direction=new Array() var y=new Array() if (spotlight.length==null){ spotlight[0]=document.all.spotlight x[0]=0 direction[0]="right" y[0]=spotlight[0].height spotlight[0].filters.light.addPoint(100,50,100,255,255,255,90) } else for (i=0;i<spotlight.length;i++){ x[i]=0 direction[i]="right" y[i]=spotlight[i].height spotlight[i].filters.light.addPoint(100,50,100,255,255,255,90) } } function slidelight(cur){ spotlight[cur].filters.light.MoveLight(0,x[cur],y[cur],200,-1) if (x[cur]<spotlight[cur].width+200&&direction[cur]=="right") x[cur]+=10 else if (x[cur]>spotlight[cur].width+200){ direction[cur]="left" x[cur]-=10 } else if (x[cur]>-200&&x[cur]<-185){ direction[cur]="right" x[cur]+=10 } else{ x[cur]-=10 direction[cur]="left" } } if (document.all&&window.spotlight){ if (spotlight.length==null) setInterval("slidelight(0)",spotlight[0].speed) else for (t=0;t<spotlight.length;t++){ var temp='setInterval("slidelight('+t+')",'+spotlight[t].speed+')' eval(temp) } } </script>

Other Options
Giving images a moving light: Having done the above, giving any image a moving light is child's play. Simply insert the below code into the <img> tag of the image in question: id="spotlight" speed="50" You can adjust 50 to another number to alter the speed of the light (larger is slower). So, here are a couple of examples: <img id="spotlight" speed="50" src="../dynamic5.gif"> <a href="http://dynamicdrive.com"><img id="spotlight" speed="100" src="../dynamic.gif" border=0></a></p> Things to consider when using the script: There are some things you may want to take note of when using the script. The first has to do with performance. Theoretically, you can apply a moving light to as many images as you wish on a page, but of course, reality doesn't always like to conform to theories. Moving a light is quite CPU intensive, especially when there are multiple lights to move and keep track of. The computer we tested this page on was a Pentium 133 (I know, not exactly mighty fast), and having more than three moving lights began to slow down the computer a bit. Just be sure not to go crazy and apply a light to a lot of images per page. Another issue has to do with the image used to cast the light on. Depending on whether your image has a transparent background or not, the light effect will be very different. The light will not shine on the background if its transparent, but will if its not. (Just test it out to see the varying effect). Finally, some may wonder "do I have to use a page with a black background in order for this script to work?" Absolutely NOT! Try it with a white background, and you'll see that it works almost just as well. Of course, a black background contrasts with the color of the light best.