IE-ony filters - changing colours 1

BillyRayPreachersSon · Dec 31, 2003

Hi all...

I have a 2-colour (black and white) image, which I have placed on a web page. I want to be able to modify both colours to be something other than black and white - but using code only (i.e. not editing the image).

This only has be be in IE for Windows, so I'm not worried about cross-browser or cross-platform issues here.

I know that I can attach a Chroma fillter to the image:

Code:

<IMG SRC=&quot;wibble.gif&quot; STYLE=&quot;filter:progid:DXImageTransform.Microsoft.Chroma(Color='#000000');&quot;>

Which will turn the black portions of the image transparent. This effectively enables me to put a background colour behind the image, turning the black into some other colour.

However, I also want to be able to change the white portion of the image into another colour, too.

Does anyone know of any other filters - or any way - of turning one colour into another colour?

Ideally what I would like is to be able to say that "#FFFFFF becomes #newRGB1" and "#000000 becomes #newRGB2".

Thanks!

Dan

philote · Dec 31, 2003

Ok, first time I've used IE filters, but I think I found a solution for you. Add the BasicImage mask filter, after the Chroma filter you're already using. This'll turn all transparent areas to the color you specify, and I believe it'll change all nontransparent areas to the color that was showing through the transparent area. So, say you have blue underneath your image and you make it show through the black areas with your Chroma filter. Then, using the mask, with the mask color as red, the transparent (now blue, but originally black) areas become red, and the white areas become blue. Make sense?
In other words, your white areas in the image will become the color of whatever color's underneath the image. And the black areas in your image will be the color you specify in MaskColor.

philote · Dec 31, 2003

Oh, and here's the sloppy code I was using to test it out. Notice I couldn't figure out how to specify the MaskColor in the style so I had to set it with javascript upon a button click. Like I said... sloppy, but it works.

Code:

<html>
<head>
  <title></title>
  <style>
  #oDiv{
    position: absolute;
    background: white;
    left: 0px;
    top: 0px;
    width: 400px;
    height: 400px;
    z-index: 5;
    filter:progid:DXImageTransform.Microsoft.Chroma(color='black')progid:DXImageTransform.Microsoft.BasicImage(mask=1);
    }
  #bottom{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 400px;
    height: 400px;
    background: yellow;
    z-index: 1;}
  button{position: absolute; left: 400px; top: 100px;}
  </style>
</head>

<body style=&quot;color: black; background: white&quot;>
  <div id=&quot;bottom&quot;>
    <div id=&quot;oDiv&quot;><img src=&quot;test.bmp&quot;></div>
  </div>
  
  <button onClick=&quot; oDiv.filters.item(1).MaskColor = 0Xff0000&quot;>Click me</button>
</body>
</html>

BillyRayPreachersSon · Dec 31, 2003

Thanks heaps - that's just what I wanted ;o)

Dan

BillyRayPreachersSon · Dec 31, 2003

Philote,

FYI, to do this without JavaScript, I'd change the filter CSS to:

Code:

filter:progid:DXImageTransform.Microsoft.Chroma(color='black') progid:DXImageTransform.Microsoft.BasicImage(mask=1,maskColor=&HFF0000);

Dan

philote · Dec 31, 2003

Oh ok. It's that &H I was missing. Thanks.

BillyRayPreachersSon · Dec 31, 2003

In fact, here's the code I ended up with:

Code:

<html>
<head>
<style>
img
{
	background: white;
	height: 17px;		/* give element 'layout' */
	filter:
		progid:DXImageTransform.Microsoft.Chroma(color='black')
		progid:DXImageTransform.Microsoft.BasicImage(mask=1,maskColor=&HFFFF00);
}
</style>
</head>
<body style=&quot;background-color:#0000FF;&quot;>
<img src=&quot;wibble.gif&quot;>
</body>
</html>

Thanks again for your help - I couldn't have done it without your code!

Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE-ony filters - changing colours 1

BillyRayPreachersSon

Programmer

philote

MIS

philote

MIS

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

philote

MIS

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor