Solved

Layering GIF89a Transparent Images

Posted on 1997-06-04
8
306 Views
Last Modified: 2008-02-26
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.
0
Comment
Question by:moosehead
8 Comments
 

Author Comment

by:moosehead
Comment Utility
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.

0
 
LVL 4

Expert Comment

by:jshamlin
Comment Utility
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.
0
 

Author Comment

by:moosehead
Comment Utility
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?

0
 

Expert Comment

by:WoMbAt
Comment Utility
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
NN3.0.

Regards,
jason
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 2

Expert Comment

by:Check
Comment Utility
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.
0
 
LVL 1

Expert Comment

by:barakp
Comment Utility
How are you forcing the images to be one on the other??
0
 

Expert Comment

by:jerussa
Comment Utility
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
0
 

Accepted Solution

by:
jerussa earned 50 total points
Comment Utility
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
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now