Dynamic Drive DHTML Scripts- Image Spotlight effect

New Revised CSS Library Forums Web Tools

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

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

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

Select All
<img id="myimage" src="theimage.jpg"> <script language="JavaScript1.2"> //Image spotlight effect- By Erik F (die_schlampe@hotmail.com) //Code enhancements by Dynamicdrive.com //Visit http://www.dynamicdrive.com for this script s = 50; // the size of the spotlight vp = 10; // the visibility percent of the picture startx = 0; // the top position of your sportlight into the image (on start) starty = 0; // the left position of your spotlight into the image (on start) ////////////////////////////////////////////////////////////////// // No need to edit below this line // ////////////////////////////////////////////////////////////////// var IE = document.all?true:false function moveL() { xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true); } if (IE&&myimage.filters) document.all.myimage.onmousemove = getMouseXY; var tempX = 0 var tempY = 0 function getMouseXY(e) { tempX = event.offsetX tempY = event.offsetY if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} if (t) { moveL(); } return true } var xv = startx; var yv = starty; var t= true; if (IE&&myimage.filters){ myimage.style.cursor="hand"; myimage.filters.light.addAmbient(255,255,255,vp) myimage.filters.light.addPoint(startx,starty,s,255,255,255,255) } </script>

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!