PngAlphaIE

Summary: Steps for displaying PNG images with 8bit alpha transparency
Version: 0.1 18 Mar 2006
Prerequisites: None
Status: Limited testing
Maintainer: zkarj
Categories: Images

Questions answered by this recipe

  • How can I make Internet Explorer (on Windows) display transparency properly?

Description

Add the following lines to local/config.php

if ((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) &&
    (strpos($_SERVER['HTTP_USER_AGENT'], 'Mac_')  == FALSE))
   { $UseAlphaFilter = 1; } else { $UseAlphaFilter = 0; }

This allows for detecting the IE browsers that cannot cope natively with 8bit transparency.

Use the following markup to include the image.

(:if !enabled UseAlphaFilter:)
Attach:trans.png
(:if enabled UseAlphaFilter:)
(:div id='png1' style='[=width:300px; height:200px; padding:0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.mysite.com/uploads/Main/trans.png", sizingMethod="image")=]':)
(:divend:)              
(:if:)

Elements that you will need to change to suit your own situation are:

  • The name of the image (trans.png above) on the Attach: and in the URL.
  • The width= and height= values should match your image dimensions.
  • The main part of the URL will need to reflect your site and the location of the image. In this case, the example page is in the Main group.

Notes

  • Tested with Firefox 1.5 and IE 6.0 on Windows XP SP2.
  • I have tested this only with a start-of-line unfloated image. It may be possible to add additional markup to allow floating (on both Attach: and (:div:)).
  • There may be a better way to specify the URL - i.e. in relative form and maybe using variables to automatically locate the correct folder.

Release Notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

Comments

See Also

Contributors

zkarj

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.