 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
| Availability: |
| |||
| Object properties: | Enabled, StartColor, StartColorStr, EndColor, EndColorStr, GradientType | |||
| 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, FRAMESET, 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 | |||
The following properties can be used with this filter:
The Enabled property can be set to true or false to control whether the Gradient() is used or not.
The StartColor and EndColor properties can be specified as a 32 bit integer in decimal or hexadecimal notation. The extra 8 bits of information specify an alpha channel blending effect.
The StartColorStr and EndColorStr properties can be specified as a hexadecimal color value string including the alpha channel value. color names may not work properly.
You should use StartColor or StartColorStr and EndColor or EndColorStr according how you want to specify the start and end colors. This is another example of where the MSIE browser syntax breaks with the traditional color naming conventions and goes off in another direction. This lack of consistency even within a browser makes it more difficult for beginners to learn how use these features.
The GradientType property selects the kind of gradient to apply. It simply controls the orientation of the gradient. A zero value specifies a vertical gradient while the 1 value specifies a horizontal gradient.
The example shows how to enable the gradient and select its direction interactively.
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT>
var theState = 0;
var theGradientType = 0;
function selectGradientType()
{
theGradientType = (theGradientType + 1) % 2;
CONTAINER.filters(0).GradientType = theGradientType;
}
function switchState(anObject)
{
switch(theState)
{
case 0:
theState = 1;
CONTAINER.filters(0).enabled = "true";
anObject.innerText = 'Remove effect';
break;
case 1:
theState = 0;
CONTAINER.filters(0).enabled = "false";
anObject.innerText = 'Apply effect';
break;
}
}
</SCRIPT>
<BUTTON onclick="switchState(this);">Apply effect</BUTTON>
<BR>
<BUTTON onclick="selectGradientType();">Next style</BUTTON>
<BR>
<DIV ID="CONTAINER" STYLE="position:absolute; left:140px; height:250; width:250; filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false', startColorStr='#FF0000FF', endColorStr='#00FFFF00', GradientType=0);">
<CENTER><BR><BR><BR>
<IMG SRC="./Logo150.gif">
</CENTER>
</DIV>
</BODY>
</HTML>| See also: | color value, Filter object, Procedural surfaces, style.filter |
| Property | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Enabled |  | 5.5  | | 5.5 | | | | | | | - |
| StartColor | | 5.5 | | 5.5 | | | | | | | - |
| StartColorStr | | 5.5 | | 5.5 | | | | | | | - |
| EndColor | | 5.5 | | 5.5 | | | | | | | - |
| EndColorStr | | 5.5 | | 5.5 | | | | | | | - |
| GradientType | | 5.5 | | 5.5 | | | | | | | - |
| Prev | Home | Next |
| filter - Glow() | Up | filter - GradientWipe() |
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. | ||