I'm planning on using alpha PNG files in a new site design of mine, and I'm incorporating a little fix to let IE view the transparency.
Browser compatability isn't my greatest concern, so I only really test in recent versions of IE (generally 5 or higher, unless I can find a PC with version 4 installed) and Firefox. Amongst people I know, I've found these are the only brands of browser they use. I've tested this script in IE6 and Firefox 0.9, and it works perfectly in both.
But I'd appreciate it if you could all quickly check that the page works on your browser too?
Works fine in FF and IE. Nice fix! Didn't think it could be done.
"Say you're hanging from a huge cliff at the top of mt. everest and a guy comes along and says he'll save you, and proceeds to throw religious pamphlets at you while simultaniously giving a sermon." - Dustin G
1. My status bar only displays "done", not what you said it would display
2. The picture does blend with the background - however, it doesn't do it perfectly on the right hand side. Although I guess it's just an imperfect alpha channel, I thought I should let you know since that was what you asked for
IE6: Statusbar says "IE is using PNG filter". No image appears at all, it's all just a red background. However right clicking where the image should be still has the "Save picture as..." etc. menu.
well, I've completly disabnled IE on my computer, so I won't test it there. Works fine in FF though, and will work fine in Opera, Mozilla, and Netscape too, IE just plain sucks, doesn't it
As a boy, I wanted to be a train. I didn’t realize this was unusual—that other kids played with trains, not as them.
Hmm, it's odd that Tigsy's IE6 isn't showing it up. It sounds like the PNG filter simply isn't working for him, and I dunno why that could be. Maybe some kind of security setting has disabled it?
The status thing in Firefox 1.0 doesn't bother me too much, that's mainly to determine whether the browser is trying to kid Javascript into thinking it's IE when it isn't (apparently some do that). If it says 'IE is using PNG filter' and you aren't using IE, then you know your Browser's telling porkies
The way the page works is based on a fix from Microsoft involving CSS filters.
The page starts off with a IMG tag where SRC is the address of the PNG file. But it also has a CSS style telling it to show that same PNG file using a filter.
If you view the page in Firefox, it won't understand the filter, so it just ignores it. Then it will draw the SRC png file the same way it always does - perfectly, complete with alpha transparency. This is what most browsers should do.
If you view the page in Internet Explorer, then CSS runs the filter and draws the PNG properly. However, the next thing IE will try doing is drawing the PNG itself - not only will this IE-generated PNG picture not have transparency, but it will put it ON TOP OF our pretty CSS picture. So to stop it doing this, a javascript changes the src attribute so that it points to a transparent gif file instead. This way, IE draws the gif instead, and we can see straight through it to reveal the nice css picture underneath.
Not nearly as complicated as it sounds
191 / 9999 * 7 + 191 * 7
Pete Nattress Cheesy Bits img src/uploads/sccheesegif
Registered 23/09/2002
Points 4811
11th January, 2005 at 16:27:53 -
works fine with FF1.0 and IE 6.0.2900 SP2. cool fix!
Hardly anyone here uses Mac if you can recall the old Mac bash post a while back. Anyway, they did do alot of fixing to the IESP2, but FireFox is still alot better.
Sorry Dines! Turned out I'm using IE5. I used to have IE6, but I recently reinstalled Windows 2000 and I dont use IE so it's just the default installation.
Sorry if I caused you any headaches
Firefox 0.9.3 displays it right (has the right status bar text too). By the way, even with that filter IE doesn't display it quite right, it actually darkens the image slightly for some reason.
if(obj.style.filter.substring(0,50) == "progidXImageTransform.Microsoft.AlphaImageLoader")
{
obj.src = "blank.gif";
window.status = "IE is using PNG filter";
}
Then it should stop it messing up if the user makes there browser says it's a different browser, and if it's an older version of IE then it will still display a picture.
No, for graceful downgrading reasons (basically so people can make webpages in newer CSS versions without it not working on anything but the newest browsers), browsers automatically assign undefined properties to "".
Here's an automated way to allow alpha channels in IE 6 and still display an image in most other browers.
Make a blank image called blank.gif and put it in the same directory as your file (or remember to change it in the javascript).
Insert this somewhere in the body part of your file (browsers that don't support the filter style don't ignore it if you change it with javascript):
< img id="dxalphatest" style="width:0px;height:0px;filter:filtertest" /> (remove the space at the start)
(Note that this will actually invalidate your document (if you actually care) because filter isn't a real CSS property.)
Advertisement
Post Reply
XImageTransform.Microsoft.AlphaImageLoader")
Edited by the Author.
