PmWiki | Cookbook / 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

Comments

Contributors

zkarj