The Light
Filter This
really is easy peasy to do .... don't be put off by all the code  only
few items need altering, and you will find it fun playing around
with the numbers! I have tried explaining everything best I can, which is
why it is so long  I am not known as a person of few words!
Copy and paste into
your page everything between the START and FINISH.
NOTE: Front Page users  First paste the code into Notepad, then
copy it from Notepad and paste into your page. Copying straight from here
into Front Page can corrupt the code.
Instructions for altering the filter are at the bottom
Don't forget to alter image name and file path to one of your own  or
you can right click on my image above and save to your system. Then once
you have got it working, exchange image for one of your own. I have the
table and cell larger than the image, so the effect is spread over a
wider area. You could, of course, apply the filter directly to the image
instead.
START
// Table
layout
<div align="center">
<center>
<table cellspacing="10" width="532" align="center" border="0">
<tr>
<td id="scriptfx" style="filter:Light(enabled=1); WIDTH: 532px"
align="middle" width="532" bgcolor="#FEFEFE">
<p align="center"> </p>
<p><img border="0" src="animals.jpg" width="374" height="242"></td>
</tr>
</table>
</center>
</div> // end table
layout
// start of
filter script example <script
language="JavaScript">
var g_numlights = 0;
window.onload = setlights;
document.onclick=keyhandler;
scriptfx.onmousemove=mousehandler;
function setlights(){
scriptfx.filters[0].clear();
scriptfx.filters[0].addcone(0,250,5,100,100,255,0,0,60,10);
if(g_numlights>0){
scriptfx.filters[0].addcone(200,0,5,100,0,0,255,0,60,10);
if(g_numlights>1){
scriptfx.filters[0].addcone(200,300,5,100,0,204,0,204,60,10);
if(g_numlights>2){
scriptfx.filters[0].addcone(0,0,5,100,50,204,100,102,50,10);
if(g_numlights>3){
scriptfx.filters[0].addcone(500,300,10,100,100,0,155,255,40,10);
}
}
}
}
}
// do not alter
below this line
function keyhandler(){
g_numlights = (g_numlights += 1)%5;
setlights();
}
function mousehandler(){
x = (window.event.x  80);
y = (window.event.y  80);
scriptfx.filters[0].movelight(0,x,y,5,1);
if( g_numlights > 0 ){
scriptfx.filters[0].movelight(1,x,y,5,1);
if( g_numlights > 1 ){
scriptfx.filters[0].movelight(2,x,y,5,1);
if( g_numlights > 2 ){
scriptfx.filters[0].movelight(3,x,y,5,1);
if( g_numlights > 3 ){
scriptfx.filters[0].movelight(4,x,y,5,1);
}
}
}
}
}
</script> // end of script
FINISH INSTRUCTIONS The filter must be
applied to an element that has width or height measurements. For example
an image, table, table cell, div, span etc. You cannot, for example apply
it to the <p>, H3, <b>. Because an exact measurement is required one can
enclose the tag within a <div> or <span> and define the width or height,
or both. For example to apply the wave filter to a line of text you could
do this:
The table cell ID is
required for the script to work. i.e. <td ID="scriptfx"
You can have a maximum of 10 cones to the effect.
To add an extra cone, repeat the last two lines of the editable script,
i.e.
if(g_numlights>3){
scriptfx.filters[0].addcone(500,300,10,100,100,0,155,255,40,10);
}
change the number
3 in
if(g_numlights>3)
to 4
 and increase that number by one for every cone you add.
If you add more than one cone, then leave off the end
} from each
cone, then add it at the end of all the cones. If you look at the whole
of that section of code, you will see that for the total number of cones
(5), at the end are the same number of
}
..... as here  there are five cones, so at the end are five closing
}.
Also, there will always be two more cones, than the number it says. Below
the last number is 3, yet there are five cones. The first cone replaces
the default lighting. The second cone below then becomes the official
first cone, which is always numbered 0 ..... so the third cone becomes
number 1 ....... are you confused yet ! Hopefully the red below will show
you what I mean.
function setlights(){
scriptfx.filters[0].clear();
scriptfx.filters[0].addcone(0,250,5,100,100,255,0,0,60,10);
// 1st cone clears the
default cone
if(g_numlights>0){
scriptfx.filters[0].addcone(200,0,5,100,0,0,255,0,60,10);
// 2nd cone becomes #0
if(g_numlights>1){
scriptfx.filters[0].addcone(200,300,5,100,0,204,0,204,60,10);
// 3rd cone becomes #1
if(g_numlights>2){
scriptfx.filters[0].addcone(0,0,5,100,50,204,100,102,50,10);
// 4th cone becomes #2
if(g_numlights>3){
scriptfx.filters[0].addcone(500,300,10,100,100,0,155,255,40,10);
// 5th cone becomes #3
} cone closed
} cone closed
} cone closed
} cone closed
} cone closed
You can alter the
following
(0,250,5,100,100,255,0,10,60,10)
The first five
are all directional
0 = specifies the distance from left to right you want the light
source to start.
250 = specifies the distance from top to bottom you want the light
source to start
5 = specifies the zaxis level of the light source.
100 = specifies the left coordinate of the target light
100 = specifies the top coordinate of the target light .
The next three
make up the color.
255 = This is Red. Value can be from 0 (lowest) to 255 (highest).
0 = This is Green. Values as for Red
10 = This is Blue. Values as for Red.
The last two are the spread and strength of the light.
60 = specifies the intensity of the light filter. 0 being the
lowest and 100 the highest.
10 = this is the angle or spread of the cone itself, measured
between the vertical position of the light source and the surface of the
object. The angle can be between 0 and 90 degrees. The smaller the number
the smaller the cone of light. The higher the number a broader more oval
cone of light is produced.
So, just play around with those numbers to see what you can achieve.
Have fun
This is a good Forum where excellent help can be found on any web design
topic 
www.talkfrontpage.com
