filter - Light() (Filter/visual)

A visual filter for simulating a lighting model.

Availability:

JScript - 3.0
Internet Explorer - 4.0
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 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.

Warnings:

Example code:

   <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

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
Enabled n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
clear() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
addAmbient() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
addCone() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
addPoint() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
changeColor() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
changeStrength() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
moveLight() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning