Categories:

JavaScript Kit > IE Filters reference > Here

Light Filter

Last updated: October 27th, 2008

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();

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.Light()";

Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.

Example:

<style type="text/css">

#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Light(enabled=false)";
filter: progid:DXImageTransform.Microsoft.Light(enabled=false);
}

</style>


<div id="somediv">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:

<style type="text/css">

#plants{
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
}

</style>


<img id="plants" src="flower.gif" />

<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:

<style type="text/css">

#mydiv{
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
width: 150px;
height: 100px;
background-color: gray;
}

</style>


<div id="mydiv">
<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:

<style type="text/css">

#mydiv2{
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
width: 150px;
height: 100px;
background-color: gray;
}

</style>


<div id="mydiv2">
<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 (IE 5.5+):


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:

<style type="text/css">

#flower{
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
}

</style>


<img id="flower" src="flower.gif" />

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

Demo (IE 5.5+):
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:

<style type="text/css">

#flower2{
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
}

</style>


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

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

Demo (IE 5.5+):
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:

<style type="text/css">

#flower3{
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
position: relative;
width: 174px;
height: 146px;
}

</style>


<img id="flower3" src="flower.gif" />

<script type="text/javascript">
var myimg=document.getElementById("flower3")
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 (IE 5.5+):
Reference List
[an error occurred while processing this directive]

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info