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:
- red: Integer between 0 - 255. Greater number equals
higher saturation.
- blue: Same as red above.
- green: Same as red above.
- 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:
- X1, Y1: Two integers that specify the left and top
coordinate of the light source in pixels, respectively.
- Z1: Integer that specifies the "z axis level" of the
light .
- X2, Y2: Two integers that specify the left and top
coordinate of the target light focus in pixels, respectively.
- red, green, blue: Three integers between 0 - 255 for
the red, green, and blue values of the color. Greater number equals
higher saturation.
- strength: Integer between 0 -100. Greater number
equals greater intensity.
- 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:
- X, Y: Two integers that specify the left and top
coordinate of the light source in pixels, respectively.
- Z: Integer that specifies the "z axis level" of the
light .
- red, green, blue: Three integers between 0 - 255 for
the red, green, and blue values of the color. Greater number equals
higher saturation.
- 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:
- lightnumber: Integer that specifies the unique
identifier for this light.
- red, green, blue: Three integers between 0 - 255 for
the red, green, and blue values of the color. Greater number
equals higher saturation.
- 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:
- lightnumber: Integer that specifies the unique
identifier for this light.
- strength: Integer between 0 -100. Greater number
equals greater intensity.
- 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:
- lightnumber: Integer that specifies the unique
identifier for this light.
- X, Y: Two integers that specify the left and top
coordinate of the light source in pixels, respectively.
- Z: Integer that specifies the "z axis level" of the
light .
- 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+):
|