Best Front Page and Web Design
Forum

Great Web Graphic program
here
 

The Light Filter
Creates the effect of lights shining on the object

 

 

back  -  home  -  Filters scripts

The Light Filter - cones and points

Both these pictures are identical, the bottom one is a
copy of the top one, but by adding filter effects - not with a graphics program but with coding, you can dramatically alter any picture as shown.

scriptfx logo

 

The Light Filter
Place the following in the BODY of your document

// START

<SCRIPT LANGUAGE="JavaScript">

function ShowEffect(Im1) {

Im1.filters.Light.addPoint(110,7,60,255,0,255,100);
Im1.filters.Light.addPoint(50,139,60,255,50,255,100);
Im1.filters.Light.addPoint(7,6,60,0,255,0,100);
Im1.filters.Light.addPoint(300,136,60,255,255,0,100);
Im1.filters.Light.addPoint(115,117,50,255,255,0,100);
Im1.filters.Light.addPoint(300,7,50,255,255,0,100);
Im1.filters.Light.addPoint(150,7,50,255,255,0,100);
Im1.filters.Light.addPoint(150,30,50,255,255,0,100);
Im1.filters.Light.addPoint(200,30,50,255,255,0,100);
Im1.filters.Light.addCone(90,150,50,100,100,255,0,0,60,15);}
window.onload = new Function("ShowEffect(document.all.demo)")
</SCRIPT>
<img id="demo" style="filter:Light()" src="mainlogo.gif" alt="scriptfx logo" align="center" width="360" height="138">
//END


Remember to change image name, size etc in the line after </script>. The filter can be applied to most things that are able to have width or height measurements applied to them. i.e., image, table, table cell, div, span etc etc. You cannot, therefore, apply the filter to <b> or <H1> etc, but if filter applied to a table cell or div or span, then everything within that cell will have the filter applied.


How to use.
addcone = Adds a cone light to the object to cast a directional light
addPoint = Adds a light source that originates at a single point and radiates in all directions

To add a point to the code, just add this line to the top of the other similar lines in the code - then change the numbers in brackets to your liking:
Im1.filters.Light.addPoint(110,7,60,255,0,255,100);

The numbers represent the following:
110 = The position of the light source, horizontally from the left
7 = The position of the light source, vertically from the top
60 = the z-axis level of the light source
255 = The color red. This can be between 0 and 255
0 = The color green. This can be between 0 and 255
255 = The color blue. This can be between 0 and 255
100 = This represents the strength of the light. 0 being lowest and 100 highest.

to add a cone to the code, just add this line to the top of the other similar lines in the code - then change the numbers in brackets to your liking:
Im1.filters.Light.addCone(90,150,50,100,100,255,0,0,60,15);

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

A good web design forum to go to is www.talkfrontpage.com

 

back  -  home  -  Filters scripts

 

Discount Templates Discount Domains Domain Reseller  Template-Layouts 
Sponsor a child    Living Kidney Donation