New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Other Sections
Sweet Ads
Bookmark online:


Moving light on image Script

Author: Dynamic Drive

Description: 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!


Image 1:

Image 2:

Click to see how the images look in a black background...

Directions Developer's View

Step 1: Insert this into the <head> section of your page:

Select All

Step 2: Insert the below at the END of your document, right above the </body> tag. This is necessary so the code can successfully scan through all images in the page to determine which ones you want to have a moving light cast on it:

Select All

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=""><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.