Transparent PNG image
Did you ever try to create transparent PNG image and place it on your Web page?
I did, FireFox displays it correctly and IE does not. But here is a trick for IE. First of all, there should be created different HTML for both browsers. FF will use “normal” IMG source code, while IE will use some magic inside IMG style attribute.
Since version 5.5, IE supports some extra style features for providing transitions and filters to images. Here is example of style attribute inside <img src=”…
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/path/image.png)"
This is not a final solution, because this should be written for IE only and that means to create logic to differentiate browsers. That logic can be placed on server side or client side. Client side version doesn’t depend on web server technology and it can be done in pure HTML. Here goes JavaScript code:
// PNG image path
var i="/path/image.php";
// image attributes are same for both cases
var a='width="150" height="90" alt="alt text" title="title" border="0" ';
// style (filter) for IE
var s='style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+i+')" ';
// write img tag depending IE
if (navigator.appName.indexOf("Microsoft") != -1 &&
navigator.platform.indexOf("Win32") != -1)
document.write('<img ' + a + s + 'src="/my/img/b.gif" />');
else
document.write('<img ' + a +'src="' + i + '"/>');
So, where you want to place PNG image, you should place that JavaScript code. Simple, isn’t it?
Why b.gif? Well, if there isn’t src attribute, IE will display broken image and transparent PNG image. Solution is to fake IE and tell him to display transparent GIF image. I have a transparent GIF image 1px width and 1px height since time when layout on HTML page was realized with table cells and transparent GIF images. This small image was expanded with width and height attributes. If you haven’t transparent GIF, here is 1px transparent GIF 20px expanded (right click and save image):
Few tips about creating PNG transparent image with GIMP. Sorry but I don’t know Photoshop that well.
- Find an image with clear background
- clear means one color background (needed for making selection by color)
- suppose that you have JPG image
- Start GIMP and load image
- Fire up Layer Dialog
- shortcut is Ctrl + L
- or you can click on Dialogs (above opened image) and than on Layers
- Add alpha channel
- on the Layer Dialog you will see one layer named Background
- click on it with right button and at bottom you will find Add Alpha Channel
- transparent layer is added now
- Select background color
- right click on image, choose Select and then Select by color
- cursors is changed now and click on background color
- you have Threshold option on that tool to make selection less or more greedy
- play with Threshold until you will be satisfied
- Threshold level depends on background purity
- in my case, Threshold of about 30 was quite enough
- Delete background color
- choose Edit and then Delete and if you followed instructions, now you should see Gray rectangles instead of background color
- Invert selection
- choose Select and then Invert
- wanted object is selected now
- Select object borders
- choose Select and then Border
- type in 2px
- Make soft borders
- object borders are pretty sharp, lets make them soft
- choose Filter above opened image
- choose Blur and then Gaussian Blur
- play with Blur Radius and watch image in preview window
- in my case I typed in 2px
- Save image as PNG
- now you have transparent PNG image
- Congratulations
This is nice and it works, but if you want to place many transparent PNG images on WEB site, you will have a lot of JavaScript copy and paste. As programmer, I don’t like “quick and dirty” method so I will suggest you to make a function. Function call will produce JavaScript code for transparent PNG image. My background is mostly PHP and here goes my png_image PHP function:
/**
* Display transparent PNG image regardless IE or FF
*
* @param string $img image name
* @param integer $width image width
* @param integer $height image height
* @param string $id image id
* @param string $alt image alt
* @param string $title image title
*/
function png_image($img, $width, $height, $id='', $alt='', $title=''){
// prepare attributes for both cases
$attribute = "id=\"$id\" width=\"$width\" height=\"$height\" " .
"alt=\"$alt\" title=\"$title\" border=\"0\"";
// prepare src atribute
$src = "/my/img/$img";
// path to transparent gif image
$gif = "/my/img/b.gif";
// filter
$f = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader';
// prepare JavaScript for transparent PNG image
$tp = '<script>';
$tp .= 'if (navigator.appName.indexOf("Microsoft") != -1 &&';
$tp .= ' navigator.platform.indexOf("Win32") != -1)';
$tp .= " document.write('<img src=\"$gif\" $attribute style=\"$f(src=$src)\"/>');";
$tp .= 'else';
$tp .= " document.write('<img src=\"$src\" $attribute/>');";
$tp .= '</script>';
// print javascript code
print $tp;
}
Everything is ready now for use on PHP page. This function can be placed inside utility library which one you should include on your PHP page. And here is example how you can use it inside PHP page:
png_image('spider.png', 150, 90, 'logo_img', 'Spider', 'Spider');