Back to Scripts

Javascript Mask Images

Requires Internet Explorer 5.5 or later to work
The DIV is located below, before applying image filters the image object requires its layout to be set.
We do that by setting its height and width properties (done inside the style tag).
Having the layout defined can also be done by setting the position attribute to absolute.
Or the layout can be defined by setting the property CONTENTEDITABLE in the div.

In the example below we populate the background image with the matrix icon, By turning on the mask we will now ONLY see the background that the image obscured.

DHTML Source

<!-- This DIV is the target container for an image.  -->
    <table cellpadding=0 cellspacing=0><tr><td background="../images/icon-matrix.gif">
    <div id="mydiv" style="width:200; height:200; filter:progid:DXImageTransform.Microsoft.BasicImage(mask=0);">
        <img width=100 height=100 SRC='../images/rgb.gif'>
    </div>
    </td></tr></table>
    <br>
    <button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mask=0)';">Mask=0</button><br>
    <buttononclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mask=1)';">Mask=1</button><br>
    <button onclick="mydiv.filters.item(0).MaskColor=0X00ff0000">Red Mask</button><br>
    <button onclick="mydiv.filters.item(0).MaskColor=0X0000ff00">Green Mask</button><br>
    <button onclick="mydiv.filters.item(0).MaskColor=0X000000ff">Blue Mask</button><br>

References:
MSDN - Mask Image

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License