Categories:

JavaScript Kit > IE Filters reference > Here

Light Filter

Last updated: May 23rd, 2007

The Light filter adds the effect of a light shining on a content. You manipulate the shape and strength of the light using JavaScript and via the Light's exposed methods.

Syntax:

filter :progid:DXImageTransform.Microsoft.Light();

Example using inline CSS:

<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.Light(enabled=false);">Some DIV</div>

Syntax via scripting:

//To define a new Light filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.Light(attribute=value1, attribute2=value2)"

To access an existing property within the Light filter:
object.filters.item("DXImageTransform.Microsoft.Light").Property1=value1;

//To access an existing property within the Light filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element. There are no attributes/properties for the Light filter:

Light Filter attributes (properties)

Attributes/ Properties Description
enabled Sets/ returns whether the filter is enabled or not. Default is true.

Valid values: true/ false

Light Filter methods (accessible only via scripting)

Methods Description
addAmbient(red, blue, green, strength) This methods adds a nondirectional, ambient light to the object. It is often used in combination with other lights.

Valid values for the parameters:

  1. red: Integer between 0 - 255. Greater number equals higher saturation.
  2. blue: Same as red above.
  3. green: Same as red above.
  4. strength: Integer between 0 -100. Greater number equals greater intensity.

Example:

<img id="plants" src="flower.gif" style="filter:progid:DXImageTransform.Microsoft.Light();" />

<script type="text/javascript">
var myimg=document.getElementById("plants")
myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
</script>

Demo:
addCone(X1, Y1, Z1, X2, Y2, red, green, blue,  strength, spread) Adds a cone shaped, directional light to the object.

Valid values for the parameters:

  1. X1, Y1: Two integers that specify the left and top coordinate of the light source in pixels, respectively.
  2. Z1: Integer that specifies the "z axis level" of the light .
  3. X2, Y2: Two integers that specify the left and top coordinate of the target light focus in pixels, respectively.
  4. red, green, blue: Three integers between 0 - 255 for the red, green, and blue values of the color. Greater number equals higher saturation.
  5. strength: Integer between 0 -100. Greater number equals greater intensity.
  6. spread: Integer between 0 -90 that specifies the degree of the light angle. Smaller angle values produce a smaller cone of light; larger values produce an oblique oval or circle of light.

Example:

<div id="mydiv" style="width: 150px; height: 100px; background-color: gray; filter :progid:DXImageTransform.Microsoft.Light();">
<img src="flower.gif" /><br />
My dog
</div>

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
mydiv.filters.item("DXImageTransform.Microsoft.Light").addCone(0,0,1,130,90,255,255,0,20,10);
</script>

Demo:


My dog

addPoint(X, Y, Z, red, green, blue, strength) Adds a light that originates at a single point and radiates in all directions.

Valid values for the parameters:

  1. X, Y: Two integers that specify the left and top coordinate of the light source in pixels, respectively.
  2. Z: Integer that specifies the "z axis level" of the light .
  3. red, green, blue: Three integers between 0 - 255 for the red, green, and blue values of the color. Greater number equals higher saturation.
  4. strength: Integer between 0 -100. Greater number equals greater intensity.

Example:

<div id="mydiv2" style="width: 150px; height: 100px; background-color: gray; filter :progid:DXImageTransform.Microsoft.Light();">
<img src="flower.gif" /><br />
My flowers
</div>

<script type="text/javascript">
var mydiv=document.getElementById("mydiv2")
mydiv.filters.item("DXImageTransform.Microsoft.Light").addPoint(10,50,100,255,255,0,50);
</script>

Demo:


My flowers

changeColor(lightnumber, red, green, blue, absoluteBol) Changes the color of the light.

Valid values for the parameters:

  1. lightnumber: Integer that specifies the unique identifier for this light.
  2. red, green, blue: Three integers between 0 - 255 for the red, green, and blue values of the color. Greater number equals higher saturation.
  3. absoluteBol: Boolean integer (0=false, 1=true) that specifies whether the color values (red, green, and blue) are absolute values that replace the current values, or are relative values that are added to the current values.

Example:

<img id="mypet" src="test.gif" style="filter :progid:DXImageTransform.Microsoft.Light();" />

<script type="text/javascript">
var myimg=document.getElementById("mypet")
myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
myimg.filters.item("DXImageTransform.Microsoft.Light").changeColor(0, 255, 255, 0, 0)
</script>
changeStrength(lightnumber, strength, absoluteBol) Changes the intensity of the light.

Valid values for the parameters:

  1. lightnumber: Integer that specifies the unique identifier for this light.
  2. strength: Integer between 0 -100. Greater number equals greater intensity.
  3. absoluteBol: Boolean integer (0=false, 1=true) that specifies whether the intensity value set replaces the current value, or is a relative value that's added to the existing value.

Example:

<img id="mypet" src="test.gif" style="filter :progid:DXImageTransform.Microsoft.Light();" />

<script type="text/javascript">
var myimg=document.getElementById("mypet")
myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
myimg.filters.item("DXImageTransform.Microsoft.Light").changeColor(0, 255, 255, 0, 0)
</script>
clear() Simply deletes all lights from the object.
moveLight(lightnumber, X, Y, Z, absoluteBol) For cone lights, moves the focus, or for point lights, the origin, of the light.

Valid values for the parameters:

  1. lightnumber: Integer that specifies the unique identifier for this light.
  2. X, Y: Two integers that specify the left and top coordinate of the light source in pixels, respectively.
  3. Z: Integer that specifies the "z axis level" of the light .
  4. absoluteBol: Boolean integer (0=false, 1=true) that specifies whether to move the light absolutely to the specified coordinates, or relative to the previous position of the light.

Example:

<img id="myimg" style="position: relative; width: 174px; height: 146px; filter :progid:DXImageTransform.Microsoft.Light();" src="flower.gif" />

<script type="text/javascript">
var myimg=document.getElementById("myimg")
myimg.filters.item("DXImageTransform.Microsoft.Light").addCone(0,0,1,174,146,255,255,0,20,10)

function lightfollowmouse(){
myimg.filters.item("DXImageTransform.Microsoft.Light").moveLight(0, event.offsetX, event.offsetY, 130, 1)
}

myimg.onmousemove=lightfollowmouse
</script>

Demo:

Reference List
[an error occurred while processing this directive]

CopyRight © 1998-2008 JavaScript Kit. NO PART may be reproduced without author's permission.