IE lt6 PNG hack

* UPDATE: 05-Sep-07

1. Thanks to Fil, for making it compatible to work with images with additional parameters. (.png?43899)
2. Also now you can overwrite default location for pixel image, in case your pixel is located somewhere else.

$(document).ready(function(){
	 $.pngfix('media/mypixel.gif'); // this is optional
	 $('img[@src$=.png], #panel').pngfix().pngunfix();
});

View source
Example

* Send comments and suggestions to me at khurshid dot com
* Sites using this plugin:
(please email me sites, if you see any)

uzhana.com

** Known issues

Requested page doesn't show anything until all images are fully loaded (noticeable for people on dial-up).
Please email me if you have any suggestions to fix the problem.


* UPDATE: 23-July-07

1. Plugin works fine with jQuery 1.1.3
2. Added support for working with sites implementing mod-rewrite (url-rewrite) (thanks to maserG)

View source
Example


UPDATE: 20-July-07

1. Thanks to advice from J. Zaefferer & jonahfox, when specifying an URL via CSS, quotation marks are optional
match(/^url\(["']?(.*\.png)["']?\)$/i)

2. Thanks to advice from O. GENDRIN plugin now supports form image buttons

3. Unfortunately I found out that, there is no way of repeating png images in css as background when filter is applied. Scaling only scales, but not repeats backgroung image

View source
Example

$(document).ready(function(){
	 $('img[@src$=.png], #panel').pngfix();
	#$('img[@src$=.png], #panel').pngfix().pngunfix();
});

1. Thanks to advice from J. Zaefferer isolated filtering operation and renamed plugin name to ...).pngfix();.

2. By request added function to remove the hack from selected items by simply ...).pngunfix();

View source
Example


Method 3: appply png hack to both images in the DOM and css (ultimate method)
Special thanks to J. Zaefferer: bassistance.de ideas were taken from tooltip plugin

1. If given object is png image in the DOM:

2. If given object has png image set as css background property:

View source
Example

* usefull resource on IE png


Method 1: Wrapping image in span and applying AlphaImageLoader filter to it
Method 2: Applying AlphaImageLoader filter directly to image css