filter - AlphaImageLoader() (Filter/procedural)

An image is displayed in the object with some additional control over how it is displayed.

Availability:

JScript - 5.5
Internet Explorer - 5.5
Object properties:Enabled, SizingMethod, Src
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

If you consider the content of the object and its background as two layers that are composited together, this filter interposes an additional image layer between them.

This layer can have its transparency adjusted as well as scaling and clipping to position the image where you want it.

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

The SizingMethod property can be set to one of the following values:

The Src property is mandatory and needs to point at a valid and absolute image URL value that can be loaded.

The example demonstrates these capabilities by cycling round all three settings using a switch case selector.

Example code:

   <HTML><HEAD></HEAD>
   <BODY>
   <SCRIPT>
   var theState = 0;
   // Cycle the sizingMethod property to size the image.
   function changeState(oObj)
   {
      switch(theState)
      {
         case 0:
         theState = 1;
         CONTAINER.filters(0).sizingMethod = "image";
         oObj.innerText = 'Scale to fit';
         break;
         case 1:
         theState = 2;
         CONTAINER.filters(0).sizingMethod = "scale";
         oObj.innerText = 'Crop to fit';
         break;
         case 2:
         theState = 0;
         CONTAINER.filters(0).sizingMethod = "crop";
         oObj.innerText = 'Normal';
         break;
      }
   }
   </SCRIPT>
   <DIV ID="CONTAINER" STYLE="position:absolute; left:140px; height:50; width:50; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='C:\FilterTests\Logo150.gif', sizingMethod='scale');" >
   </DIV>
   <BUTTON onclick="changeState(this);">Scale to fit</BUTTON>
   </BODY>
   </HTML>

See also:Filter object, Procedural surfaces, style.filter

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
Enabled n/a5.5 5.5 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
SizingMethod n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Src n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-