 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
| Availability: |
| |||
| 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:
| Index | Description |
| 0 | Uniform alpha level defined by the opacity name=value pair. The entire element is rendered at the same opacity level. |
| 1 | A 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. |
| 2 | Radial gradient starting at the StartX, StartY position and using the two opacity values for range. |
| 3 | Rectangular 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.
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>
</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 |
| Property | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Enabled |  | 3.0  | | 4.0 | | | | | | | - |
| Opacity | | 3.0 | | 4.0 | | | | | | |  |
| FinishOpacity | | 3.0 | | 4.0 | | | | | | | |
| StartX | | 3.0 | | 4.0 | | | | | | | |
| StartY | | 3.0 | | 4.0 | | | | | | | |
| FinishX | | 3.0 | | 4.0 | | | | | | | |
| FinishY | | 3.0 | | 4.0 | | | | | | | |
| Style | | 3.0 | | 4.0 | | | | | | | |
| Prev | Home | Next |
| Filter | Up | filter - AlphaImageLoader() |
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. | ||