AlphaImageLoader Filter

This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9.

Displays an image within the boundaries of the object and between the object background and content, with options to clip or resize the image. When loading a Portable Network Graphics (PNG) image, tranparency from zero to 100 percent is supported.

Syntax

HTML	<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" ... >	Internet Explorer 5.5 or later
Scripting	object.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"	Internet Explorer 5.5 or later

Possible Values

sProperties

String that specifies one or more properties exposed by the filter.

Members Table

The following table lists the members exposed by the AlphaImageLoader object.

Attribute	Property	Description
enabled	Enabled	Sets or retrieves a value that indicates whether the filter is enabled.
sizingMethod	sizingMethod	Sets or retrieves the manner in which to display an image within the boundary of the object that the AlphaImageLoader filter is applied to.
src	src	Sets or retrieves the URL of an image that the AlphaImageLoader filter loads.

Remarks

The src property has no default and must be defined for this filter to affect the object's display.

Transparency for PNG images is respected during text selection. This means the user can select content that is displayed behind the fully transparent region of a PNG image.

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

In standards mode, empty div elements do not display. If your filtered elements do not show up, make sure you set the div's height and width property to the size of your image , or fill the div with a non-breaking space (   ) . You can test your page under different document modes by using the Developer Tools on Internet Explorer 8.

You can assign multiple filters or transitions to an object by declaring each in the filter property of the object. The following div declaration assigns two filters and a Wheel transition to a div element.

<DIV STYLE="width:100%; filter:
    progid_DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid_DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid_DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>     

When multiple filters are applied to an object, each filter is processed in source order, with the exception of procedural surfaces, which are computed first. To emphasize a filter's effect, place it last in source order or on the object's parent. Always place transitions last in source order.

Examples

Click the button below to view a demonstration of the advantages of using the AlphaImageLoader filter to display PNG images over that of GIF images.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/filter/AlphaImageLoader.htm

The following example loads a div element with an image expanded to a 250-pixel square and then uses the sizingMethod property to change between the default, 100-pixel size and the expanded, 250-pixel size. The filters collection is used to reference the div element's filter properties.

<SCRIPT>
var bToggle = 1

<!-- Toggle the sizingMethod property to resize the image.  -->
function fnToggle(oObj) {
    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.filters(0).sizingMethod="image";
        oObj.innerText='Enlarge It';}
    else {
        bToggle = 1;
        oDiv.filters(0).sizingMethod="scale";
        oObj.innerText='Make Normal';}
}
</SCRIPT>
        
<!-- This DIV is the target container for the image.  -->        
    <DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;         
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >
        </DIV>

<BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/filter/AlphaImageLoader_0.htm

Applies To

A, ABBR, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, hn, IFRAME, I, INS, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TH, TD, TT, U, UL, VAR, XMP