The comment left by "doggz at mindless dot com" will cause a duplication in layering of the transparent image - AlphaImageLoader loads the image as if it were a floating layer on top of the <img> element - so your image will double up.. so don't go thinking something very strange is happening with your PHP it's the silly browser ;)
The easiest (although not the best) way to get around this is to use the CSS background property instead of an image src - because as of yet you can't change an image's src dynamically using currently supported CSS:
<div style="width:200px; height:200px; background: url(my-trans-image.php); *background:url(); *filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader(src='my-trans-image.php', sizingMethod='scale');"></div>
The above (although not pretty) keeps the image loaded as a background for any good browser as they should ignore the starred (*) CSS items and should support Alpha PNGs natively. IE will listen to the starred items and blank out the background whilst applying it's AlphaLoader on top. Obviously you need to know the width and height of your image but you can get this using getimagesize() or just by hardcoding.
Downsides to know:
1. Unless the user has 'backgrounds enabled when printing' your image wont show up when the webpage is printed.
2. You can't stretch or shrink a background image - if you change the div's dimensions from that of the image you will stretch it in IE (due to the 'scale' property - which you can change for sake of standardness to 'crop') but you will crop it in any other browser.
3. Most browsers treat images and backgrounds differently, in load priority and in the way the user can interact with them.
Other Options:
Other methods resort to using JavaScript or Browser Detection on the Server Side.
imagesavealpha
(PHP 4 >= 4.3.2, PHP 5)
imagesavealpha — Configure l'enregistrement des informations complètes du canal alpha lors de sauvegardes d'images PNG
Description
imagesavealpha() définit l'option pour essayer de sauvegarder toutes les informations du canal alpha (en opposition à la transparence à couleur unique) lors de la sauvegarde d'images PNG.
Vous devez désactiver le alphablending (imagealphablending($im, false)) pour l'utiliser.
Le canal alpha n'est pas supporté par tous les navigateurs ; si vous avez des problèmes avec le vôtre, essayez de charger le script avec un navigateur compatible avec les canaux alpha, c'est à dire le dernier Mozilla.
Liste de paramètres
- image
-
Une ressource d'image, retourné par une des fonctions de création d'images, comme imagecreatetruecolor().
- saveflag
-
Si l'on doit ou non sauvegarder le canal Alpha. Par défaut, FALSE.
Valeurs de retour
Cette fonction retourne TRUE en cas de succès, FALSE en cas d'échec.
Exemples
Exemple #1 Exemple avec imagesavealpha()
<?php
// Charge une image PNG avec un canal Alpha
$png = imagecreatefrompng('./alphachannel_example.png');
// On fait ici les opérations que l'on souhaite...
// Désactive l'Alpha blending et définit le drapeau Alpha
imagealphablending($png, false);
imagesavealpha($png, true);
// Affiche l'image au navigateur
header('Content-Type: image/png');
imagepng($png);
imagedestroy($png);
?>
Notes
Note: Cette fonction requiert la bibliothèque GD 2.0.1 ou supérieure (2.0.28 ou supérieure est recommandée).
imagesavealpha
23-Apr-2008 01:47
06-Oct-2003 04:50
To use PNG-24 in IE 5.5+ try:
<img alt="Transparant PNG" src="myimage.gif" style="width: 200px; height: 200px; filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png', sizingMethod='scale')" />
there is more info available at http://people.brandeis.edu/~peelle/png/
