 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
| Availability: |
| |||
| Object properties: | Enabled | |||
| Object methods: | clear(), addAmbient(), addCone(), addPoint(), changeColor(), changeStrength(), moveLight() | |||
| Supported by objects: | A, ACRONYM, ADDRESS, B, BDO, BIG BLOCKQUOTE, body, BUTTON, CAPTION, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, Hn, I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP | |||
This visual filter simulates the effect of a light source being played on the element.
The Enabled property is supported - it was added for version 5.5 of MSIE to provided a consistent way of controlling whether a filter was active or not.
There are also methods for defining the type of light source, the location of it, and its intensity. The light source color can also be specified. These methods are supported:
The clear() method removes all currently defined light sources. It has no parameters. You should stack your light sources with this being the first one unless you want to accumulate the lighting effects during any dynamic updating.
The addAmbient() method is used to add another ambient light source. The red, green, blue and strength parameter values describe its lighting properties. The parameters are presented in this order:
Red intensity
Green intensity
Blue intensity
Strength
The addCone() method is used to to describe a directional light source. Its parameters include a description of the beam direction and spread. The parameters are presented in this order:
Left coordinate of the light source.
Top coordinate of the light source.
Z-axis level of the light source.
Left coordinate of the target light focus.
Top coordinate of the target light focus.
Red intensity
Green intensity
Blue intensity
Strength
Spread
The addPoint() method is used to describe a point light source. The parameters are presented in this order:
Left coordinate of the light source.
Top coordinate of the light source.
Z-axis level of the light source.
Red intensity
Green intensity
Blue intensity
Strength
The color of a light source can be changed by calling the changeColor() method. The parameters are presented in this order:
Light number
Red intensity
Green intensity
Blue intensity
Replace or accumulate color flag
The intensity of the light impinging on the object can be modified for each light source with the changeStrength() method. The parameters are presented in this order:
Light number
Strength value
Replace or accumulate strength flag
The location of a light source can be modified with the moveLight() method. The parameters are presented in this order:
Light number
Left coordinate of the light source.
Top coordinate of the light source.
Z-axis level of the light source.
Relative or absolute move flag
The example demonstrates how several light sources can be combined and then moved in a mouseMove event loop to simulate the effect of a torchlight in a darkened room. The clear() function is necessary to avoid the light sources simply accumulating a lighting effect with each mouse move. The ambient light source raises the background illumination to a dull grey.
Filters are defined in style sheets as if they were a function call with its arguments expressed as name=value pairs. This is not the typical way to define arguments so you should be aware of this anomaly when working with filters.
<HTML>
<HEAD>
<STYLE>
.aFilter
{
background-color:#FFFFFF;
filter:light();
position:absolute;
top: 100;
left: 100;
color: cyan;
height: 250;
width: 250;
}
</STYLE>
</HEAD>
<BODY onMouseMove="myHandler()">
<DIV ID="EXAMPLE" CLASS="aFilter">
<BR><BR><BR>
<CENTER>
This text is highlighted<BR>
with a light source.
</CENTER>
</DIV>
<SCRIPT>
function myHandler()
{
myLightX = 125;
myLightY = 125;
myLightZ = 1;
myTargetX = event.x;
myTargetY = event.y;
myRed = 200;
myGreen = 64;
myBlue = 32;
myStrength = 100;
mySpread = 220;
EXAMPLE.filters[0].clear();
EXAMPLE.filters[0].addAmbient(64, 100, 10, 100);
EXAMPLE.filters[0].addCone(myLightX, myLightY, myLightZ, myTargetX, myTargetY, myRed, myGreen, myBlue, myStrength, mySpread);
}
</SCRIPT>
</BODY>
</HTML>| See also: | Filter object, style.filter |
| Property | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Enabled |  | 3.0  | | 4.0 | | | | | | | - |
| Prev | Home | Next |
| filter - Iris() | Up | filter - Mask() |
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions. | ||
