filter - Gradient() (Filter/procedural)

A procedural definition of a gradient effect.

Availability:

JScript - 5.5
Internet Explorer - 5.5
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 example shows how to enable the gradient and select its direction interactively.

Example code:

   <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

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
Enabled n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
StartColor n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
StartColorStr n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
EndColor n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
EndColorStr n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
GradientType n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-