Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Layering GIF89a Transparent Images

Posted on 1997-06-04
8
Medium Priority
?
390 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
ID: 1266296
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
ID: 1266297
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
ID: 1266298
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Expert Comment

by:WoMbAt
ID: 1266299
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
 
LVL 2

Expert Comment

by:Check
ID: 1266300
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
ID: 1266301
How are you forcing the images to be one on the other??
0
 

Expert Comment

by:jerussa
ID: 1266302
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 100 total points
ID: 1266303
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

782 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