using html or javascript to change color of a gif?

Question

Given: A transparent background GIF file -example A Black Hat with blank - transparent background....
can a person at the website toggle the hats color
from white blue green brown etc. etc. without having to switch from 1 gif to another ...I want to adjust the color of the single gif file.

can it be done with some type of code?

Thank you I was at that exact webiste yesterday. Filters are not able to HUE or change the original color unfortunately.
Some cool effect can be done tho....
Thanks for the quick answer, my friend.

My quest goes on...perhaps a background change and masking...
I will keep searching for an answer...or I will just have to create alot more gifs.
I was trying to avoid that...

Perhaps layering and visbility....
im using div and img id's in code for kids to create an avatar-face, and there are 7 or 8 eye types alone...can you imagine taking those nine and having to make each style in bule green yellow hazel brown black
that is 42 to 48 gif files....
If could take each of the 7 or 8 and rotate its hue, it would be great....

i thought i had seen this on a website a few years back, but it might have been rollover effect...

The quest goes on

Thank you I was at that exact webiste yesterday. Filters are not able to HUE or change the original color unfortunately.
Some cool effect can be done tho....
Thanks for the quick answer, my friend.

My quest goes on...perhaps a background change and masking...
I will keep searching for an answer...or I will just have to create alot more gifs.
I was trying to avoid that...

Perhaps layering and visbility....
im using div and img id's in code for kids to create an avatar-face, and there are 7 or 8 eye types alone...can you imagine taking those 8 and having to make each style in bule green yellow hazel brown black
that is 42 to 48 gif files....
If could take each of the 7 or 8 and rotate its hue, it would be great....

i thought i had seen this on a website a few years back, but it might have been rollover effect...

The quest goes on

I should add that the Hat is one of many overlapping divs. So a color background for it will over lap another div.

As I mentioned GIF with transparent background, 1 object: say a hat or pair of eyes etc.
I want to change hat color or eye color etc.
using 1 original gif file and Hue or select somekind of coloring agent/filter etc.

Answer 1

Internet Explorer supports a special style attribute called Filter. You can read about it here: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp

and

http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp

This will only work in MSIE 5.5 and higher. Outside of that there isn't really any way to change the color of an image... that is kind of outside the functional purpose of HTML, and JavaScript doesn't do image manipulation.

Edit: Hue cannot be changed by JavaScript... that is simply outside the scope of JavaScript's capabilities. Sorry... you will need to make multiple images. The only other possibility is to run a program on the server-side that can modify and re-save the image to the output stream on the fly. This is pretty easy to do in .NET (I've done it more than once myself... not changing the hue, but doing other kinds of image manipulation). Then you could just do something like

Answer 2

There is a way to do this by manipulating the bitstream of the GIF file.

If you're able to obtain a copy of GIF file format documentation you can then find the offset for background color. Using your original GIF change the values for background color and write the new GIF. I did this about four years ago in testing because I needed to return an image with a query result. So, since I didn't want to spend time searching for, creating test images I thought what if I could change the background or foregound color of one image. So, I found the GIF file format documentation and took it from there.

Then when I query the database I would create random values for RGB, read the GIF file, apply the value, then write out and pass the file name to an HTML template page. Response time was sub-second.

You could create large numbers of files using such a method if you're only wanting to change the foreground or background color of an image.

Now, I'm a mainframe guy and the code was written in Fujitsu .Net COBOL on my desktop with initial viewing of the file in hexadecimal format on the mainframe.

Answer 3

As far as I know there's no way to do that with JavaScript. But, what you could do is: invert the gif (I'm assuming it's a two color gif, transparent and solid) and then change the background color in Javascript. Disadvantage is that you can't use transparency anymore (it's used for setting the color).

Another possibility is to use a server side script (PHP, ASP,...) that generates the gif (or loads one from disk and changes the palette). Then you could just update the src attribute of the gif in JavaScript to change the color. Something like this:


and then
document.getElementById('hat').src = "hat.php?color=ffffff";

Answer 4

You could make the hat itself transparent then use CSS to make the div mapped to the hat: div#hat:hover { background-color: brown; }
div#hat { background-color: green; }