Solved

Layering GIF89a Transparent Images

Posted on 1997-06-04
8
365 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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 50 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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

635 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