filter - Alpha() (Filter/visual)

A visual filter for controlling transparency.

Availability:

JScript - 3.0
Internet Explorer - 4.0
Object properties:Enabled, Opacity, FinishOpacity, StartX, StartY, FinishX, FinishY, Style
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 filter is used to define a transparency level with an optional gradient effect.

The Enabled property can be set true to switch on the effect of this filter or false to deactivate it.

The Opacity property describes the initial opacity value. The values 0 and 100 represent the full range of alpha levels with 0 being fully transparent to 100 being fully opaque.

When using a gradient, the FinishOpacity describes the opacity required on completion.

The StartX and StartY properties are the starting coordinates of the gradient.

The FinishX and FinishY properties are the ending coordinates of the gradient.

The Style property defines the kind of gradient to use for the alpha channel filter. The following kinds of gradient are supported:

IndexDescription
0Uniform alpha level defined by the opacity name=value pair. The entire element is rendered at the same opacity level.
1A linear gradient is specified. The two opacity levels define the start and end gradient points while the start and finish coordinates define the gradient normal vector.
2Radial gradient starting at the StartX, StartY position and using the two opacity values for range.
3Rectangular gradient spanning the rectangle defined by the start and end coordinates and using the start and end opacity values.

There are two examples. One shows the creation of the filter from script, the other implements the same effect but shows the modification of an existing object defined by <STYLE> tags.

Warnings:

Example code:

   <HTML>
   <HEAD>
   </HEAD>
   <BODY onLoad="pulsateButton()">
   <INPUT ID="MYBUTTON" TYPE="button" VALUE="Button">
   <BR>
   <SCRIPT>
   var theOpacity = 0;
   var theIncrement = 1;
   function pulsateButton()
   {
      theOpacity += theIncrement;
   
      myFilter = "Alpha(opacity="+theOpacity+")";
      document.all.MYBUTTON.style.filter = myFilter;
      if((theOpacity % 100) == 0)
      {
         theIncrement *= -1;
      }
   
      setTimeout("pulsateButton()", 5);
   }
   </SCRIPT>
   </BODY>
   </HTML>
   ----------------------------------------------------------------
   <HTML>
   <HEAD>
   <STYLE>
   INPUT.aFilter {filter:Alpha(Opacity=50);}
   </STYLE>
   </HEAD>
   <BODY onLoad="pulsateButton()">
   <INPUT ID="MYBUTTON" TYPE="button" VALUE="Button" CLASS="aFilter">
   <BR>
   <SCRIPT>
   var theOpacity = 0;
   var theIncrement = 1;
   var theFilter = document.all.MYBUTTON.filters[0];
   function pulsateButton()
   {
      theOpacity += theIncrement;
   
      theFilter.opacity = theOpacity;
      if((theOpacity % 100) == 0)
      {
         theIncrement *= -1;
      }
   
      setTimeout("pulsateButton()", 5);
   }
   </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-
Opacity n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
FinishOpacity n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
StartX n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
StartY n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
FinishX n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
FinishY n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
Style n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning