Back to Scripts

Javascript Images Color / Grayscale (Desaturate)

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.

To desaturate an image we set the grayScale property to 1.
Roll your mouse over the images below and they will turn from grayscale to color (onmouseover).
When your mouse exits the image (and/or text) the image will return back to gray (onmouseout).

Baby Maker

Doll House

Boy Maker

DHTML Source

<!-- This DIV is the target container for the image.  -->
      <table><tr><td>
      <div style="height:50; width:80; filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)" align=center onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=0)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)'">
          <a href="http://elouai.com/smiley-creator/animal-bits.php"><img width=40 height=28 border=0 src='../images/BABY_doll.gif'><br>
          <font size=1>Baby Maker</font></a>
      </div>
      </td><td>
      <div style="height:50; width:80; filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)" align=center onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=0)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)'">
          <a href="http://elouai.com/room-maker/doll-house.php"><img width=40 height=28 border=0 src='../images/DOG_room.gif'><br>
          <font size=1>Doll House</font></a>
      </div>
      </td><td>
      <div style="height:50; width:80; filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)" align=center onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=0)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)'">
          <a href="http://elouai.com/doll-makers/boy-doll-maker.php"><img width=40 height=28 border=0 src='../images/BOY_doll.gif'><br>
          <font size=1>Boy Maker</font></a>
      </div>
      </td></tr></table>

References:
MSDN - Basic Image, Grayscale

About Privacy Policy Hosting by Web Hosting Canada

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