Back to Scripts

Javascript, Image Invert or XRay filter

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.

There are TWO specific filters to get a negative of your image, the xray filter and the invert filter
The XRay essentially creates a grayscale negative of your image while the invert creates a colorized version of your image negative.

Div text

DHTML Source


<!-- This DIV is the target container for the image.  -->  
    <table><tr><td width=100 height=100>
      <div id="mydiv" style="width:80; height:80;">
          <center>
          <img src='../images/DOG_room.gif' STYLE="width=40; height=28;"><br>
          <font size=1>Div text</font>
          </center>
      </div>
    </td></tr></table>

    <br>
    <br>

<!-- Buttons to manipulate the div.  -->
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(xray=1)'">Xray (grayscale)</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(invert=1)'">Invert (colorized)</button><br>
<button onclick="mydiv.style.filter=''">Clear Filter</button><br>

References:
MSDN - Drop Shadow
MSDN - Shadow

About Privacy Policy Hosting by Web Hosting Canada

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