[Plugin] PNG-Alpha Transparency for MSIE

Hello Everyone,

Many thanks goes to Ryan for sharing this bit of code which I’ve managed to wrap inside a plugin so that it can be easily applied to your modx enabled website.

Trigger Event:
--------------------
OnWebPagePrerender

Plugin configuration:
----------------------
&spacer=PNG Spacer Path;string;assets/images &sm=Size Method;list;Scale,Crop,Image;Image

Create a new plugin with the above settings. Unzip the attached zip file and copy content of pngalpha4msie.txt into the plugin. Also copy the spacer.png image file into assets/images folder.

Here’s an example of a png-24 alpha image tested in IE 6.0:

Note: You must be logged in before you can view images and download file attachments

Before (plugin disabled or not installed):


After (plugin enabled):

Thanks for great Plugin

it is really good since IE does not support PNG transparency images.

Best wishes and regards,

zi

I think this is a much needed plugin, thanks! I’m courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance, I saw that hack a long time ago but can’t remember exactly how it’s done any more.

Thanks for the great plugin! Regardless there is a couple of sites that will make good use this

Thank you very, very much!

I think this is a much needed plugin, thanks! I’m courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance, I saw that hack a long time ago but can’t remember exactly how it’s done any more.

I don’t think it negatively affects validation, FWIW. Also, any other ideas for a "compatibility kit" for Win IE less than the upcoming version 7.0. Hover:anything comes to mind for me...

Quote from: element at Jun 01, 2005, 04:27 PM

? I’m courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance

Hi,

Thanks to all for the feedback. I don’t see where this plugin should have any effect on xhtml and css. How it works is that it will only replace the "src" values for the necessary tags only when the IE browser is detected. So it should not change anything for FF, opera or any other browser.

Best regards,

OK found a little bug with this cool plugin

the plugin needs image dimentions to work or els the spacer.png wil be 0 pixels and that way wil it not show the image.

I used the img TV to set a png but that resulted in the png file not showing and the source looked like this:



then I changed the TV to a richeditor one and placed an png with that and it works fine. The source of the page rederd this way is:


see the difference?

This: style="width: 0; height: 0; (image not showing)
or this: style="width: 610px; height: 124px (image showing)

Greets Dimmy

Hi Dimmy,

I think the reason is because the Image TV does not set the width and height of the image. You can continue to use the RichText editor for the time being.

TP3 will include an Image Widget which will allow you to set the Width and height of the image.

Quote from: xwisdom at Jul 14, 2005, 05:37 PM

Hi Dimmy,

I think the reason is because the Image TV does not set the width and height of the image. You can continue to use the RichText editor for the time being.

TP3 will include an Image Widget which will allow you to set the Width and height of the image.

X,

I don’t know if this will help, but I tried using a bunch of different hacks to make PNGs work for me, and the one that works the best is the one at: http://homepage.ntlworld.com/bobosola/

FWIW, please everyone keep in mind that IE7 will support PNG transparency.

Well...I’ll put my two cents in....

I think one thing everyone should realize is that the support for PNG alpha transparency is still not quite where it needs to be yet. Granted, the support is there for many browsers and with some hacks it can be implemented. But relying on it and designing a site around it might not be such a good thing yet. I always do everything in terms of the "lowest common denominator".

For example, when it comes to screen resolutions, 800x600 is about the lowest common denominator with 1024x768 quickly becoming the norms. Now, this assumes that you’re targetting the widest audience. If you know that the majority is using higher screen resolutions then 1024x768 might be your target resolution.

Another example would be which revision of CSS to use. Obviously, CSS 3 isn’t really an option right now. But you might want some CSS 2 stuff. So developing your style sheets to degrade properly would definitely need to be addressed.

The point is that if you use PNG alpha transparencies, you’ll need to think about how it’ll degrade on browser that don’t support transparencies or PNG’s for that matter. I certainly wouldn’t like to visit a site and see a nasty grey box around an image. I guess it just really depends on how you plan to use them and what your target audience will be.

Just some food for thought.

Jeff