THIS DOCUMENTATION IS DEPRECATED

PLEASE VISIT : PNGHack beta 5 documentation

. .

^{Document dedicated to version 1.0 beta 4, last update : 2008/03/22 9:00PM (GMT+1)}

I hope you'll understand my crappy english ...

Introduction

This project is dedicated to distribute open-source libraries, making it easier to integrate PNG files into documents that should work with versions of Internet Explorer 5.5 and 6. This hack isn't dedicated to CSS background properties !

How does it work ?

While other libraries affect the DOM structure by replacing images or other type of elements by new elements, this one doesn't. Although it still uses the existing element to improve cross-browser compatibility, easier maintenance and further developments inside the website.

The only change is applied to the src or the specified property what would be replaced by a spacer.gif, while the original src would be transformed into a DirectX AlphaImageLoader Filter. Finally, the hack back ups the original src by applying a 'pngsrc' property to the image, what you'll be able to read and write !

Some little examples

Basics

First, we will need some elements with the 'hack-png' class.

<img src="foo.png" alt="foo" class="hack-png" />
<img src="bar.png" alt="bar" class="hack-png" id="bar" />
<input type="image" src="blah.png" alt="blah" class="hack-png" />

Include the pnghack file into the document by using conditional comments, don't forget to use conditional comments at any time to avoid other browsers.

<!--[if lte IE 6]> <script type="text/javascript" src="pnghack.js"></script> <![endif]-->

And don't forget the spacer.gif and its directory, it should look like this :

'images/spacer.gif'

Well, now let's create our javascript object, we will call it 'ph', and launch it after the document loads.

<script type="text/javascript">
window.onload = function() {
	ph = PNGHack();
	ph.go();
};
</script>

That's it, all elements with the hack-png class are now hacked !

You can specify the URL or directory for your spacer.gif if you don't have the defaul location, like this :

<script type="text/javascript">
window.onload = function() {
	ph = PNGHack('/some/other/directory/mySpacer.gif');
	ph.go();
};
</script>

You can also apply the hack to specific elements, for example input :

<script type="text/javascript">
window.onload = function() {
	ph = PNGHack();
	ph.go('input');
};
</script>

Or on none-HTML elements and an other attribute, in this example we gonna hack the image element where the source is specified by the data attribute.

<script type="text/javascript">
window.onload = function() {
	ph = PNGHack();
	ph.go('image','data');
};
</script>

Hack dynamically created elements

You can easily hack created elements after the document is loaded. For example :

<script type="text/javascript">
	i = new Image();
	i.src = 'images/foobar.png';
	document.body.appendChild(i);

	ph.hack(i);
</script>

That's it !

Get all hacked elements

You can get an array of all hacked elements (img, input, ...) in your document, and you can also rewrite it :

<script type="text/javascript">
	ph.elements;
</script>

Isn't that nice ?

Get the original src

As told in the "How does it work" chapter, you can retrieve the original SRC of any hacked file. In PNGHack mode :

<script type="text/javascript">
	var firstImage = ph.elements[0];
	firstImage.pngsrc;
</script>

And also in pure DOM :)

<script type="text/javascript">
	var firstImage = document.getElementById('bar');
	firstImage.pngsrc;
</script>

Modify the pngsrc

You can modify the original pngsrc into a new one without rewriting the DOM !

<script type="text/javascript">
	var bar = document.getElementById('bar');
	bar.pngsrc = '../images/fooBar.png';
	ph.hack(bar);
</script>