spotlights

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

// end table layout

// start of filter script example

// do not alter below this line

// 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 z-axis 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

Best Front Page and Web Design Forum		Great Web Graphic program here
	The Light Filter Creates the effect of a light shining on the object

Spotlights