Layering GIF89a Transparent Images

I have written a Javascript program similar to Mr Potatohead which allows you to select a person's facial features (which are preloaded GIF89a images with transparent {non-animated} backgrounds) and loads them into an Onscreen Image in layers. This works fine in Netscape 3.0 (32-bit) on NT4.0, but in Netscape 3.01 Gold (16-bit) on Win3.1, only the last (topmost) image layer is displayed.
The images were created with Photoshop GIF89a Export.
I tried changing the disposal method to "do nothing" or "leave previous image" in the GIF89a Control Header with a debugger, but to no avail.
Can anyone tell me why this works on one and not the other?
I would think that the browser should load the image in conformance to the GIF89a standard.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mooseheadAuthor Commented:
Actually, I might have a possible answer.
Someone at work told me that there is a bug in the
Win 3.x drawing routines pertaining to irregularly shaped
buttons and/or transparencies.

The bug isn't in the system software, it's in the browser ...

A transparent GIF should knock out to the background of the Web page, not to the GIF that was previously loaded in that IMG location.  IOW, the previous image should be purged altogether before loading the next one, with no layering effect.

I think this means that you're exploiting the bug, and a browser that's been "fixed" will not take advantage of the bug to achieve the effect you desire.

A safer and more stable way to create the interface you describe is to load the "face" as the background image for the page, then load the other images on top of it (you'll need transparent gifs to "hold" the sizes and locations)

Of course, your problem will then be quite the opposite - items that have been replaced will not completely disappear - on browsers that still contain the bug.

With that in mind, it's probably time to switch technologies.  A Java Applet or a Shockwave animation can "layer" images much more effectively and dependably across various browsers.  Also, the newest Netscape, 4.0, handles "layers" explicitly, and with more precision.

Each of these techniques, of course, narrows your audience - but if your audience depends on users being javaScript 1.1 compliant, you can probably count on their browsers supporting java or the requisite plug-in for Shockwave.
mooseheadAuthor Commented:
I have to disagree, the GIF89a standard specifies the type of background cleanup or "disposal method". In this case, the flag
is set to "do nothing" or "leave previous image". If what you say is correct, then certain types of animated GIFs would not work correctly, which is not the case (Ex: optimized animated GIFs where only small portions of the image move use a smaller image (rectangle) for the moving frames. The smaller images overlay the previous larger images, not the background image.)

If I am indeed exploiting a browser bug, then why was the NS 3.0 Win3.x version fixed while NS 3.0 and NS 4.0 (WinNT) was never fixed?

The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Hi. I have had the same problem, but I tried a different
GIF editor with disposal method set as replace, and it
worked fine. Try using a different GIF editor... otherwise
try tweaking the browser/image settings. I think that
Netscape has changed the image loading behaviour after

Also, take a look at the palete (sp?) that the gif files are using and make absolutly sure that the color used for the transparent color is exactly the same number in all the images (like 255 or 0).  If you try all that and it still doesn't work, try changing the transparent color you use to 0 instead of 255 (a lot of people use 255, if you use 0, ignore this).  From what I've heard, Netscape uses a palate of 216 colors so some dithering may be happening to cause this problem.  I'm not sure how long they've been using the 216 colors and it absolutly possible that it's been in since version 1.  It that's the case, this won't do you any good.  Still worth a try if you can't get anything else to work.  Animated gif files use a single palate for all images contained in it.  If you are using separate images, these problems could crop up.  Just a thought.
How are you forcing the images to be one on the other??
There is a software from Microsoft, that you can make transparent
whatever colour of the image, the program is Microsoft GIF Animator and you can download free from the Microsoft server or find it in altavista, for example. I think that you can use the 89 and 87 format
There is a software from Microsoft, that you can make transparent
whatever colour of the image, the program is Microsoft GIF Animator and you can download free from the Microsoft server or find it in altavista, for example. I think that you can use the 89 and 87 format

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.