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


IE5+

Image Spotlight effect

Author: Erik F

Note: Modifications to script by DD for code enhancements and bug fixes

Description: Cast an interactive "spotlight" on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.

Demo: Move your mouse over the following image if you're using IE4+


Directions Developer's View

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

Select All

Step 2: Then, add the below code to the <BODY> section of your page:

Select All

Configure the image to be shown, and you're done!

Technical Note

Testing using two computers of varying speeds reveals that this effect requires a rather decent computer to render smoothly (ie: on a Celeron 400, the spotlight moves ratherly choppily). Also, the larger the image size (dimensions wise), the more resource-intensive the script becomes. Keep these two points in mind as you spotlight that huge photograph you took using your digital camera!