Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Layering GIF89a Transparent Images

Posted on 1997-06-04
8
Medium Priority
?
378 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

705 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