Overview

As you know IE versions below 6 do not support png transparency. This plugin designed to fix that problem by applying appropriate filters to user specified elements, while keeping all element tags intact.

Plugin works well with both img elements within the DOM and css properties specified externally.

• It is chainable.

• Unlike some other png hack solutions, it does not replace/hide any of your html tags.

• You can revert applied changes using .iunfixpng().

• Extremely easy to use!

Known limitations
(I don't have solutions for those listed below yet - CSS features that are lost when the fix applied)

• Always defaults to "background-position:top left" and you cannot reposition it.

• Unable to perform "background-repeat:repeat-y" or "background-repeat:repeat-x" on a target.

• For the hack to work your item needs to be visible.

Directions

• Download jquery 1.2.1. or above and of course ifixpng.

• Save pixel.gif to images/pixel.gif.

• And finally initiate the plugin. See below. I used iMakePostable to make code below viewable).

// apply to all png images
$('img[@src$=.png]').ifixpng();

// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();

// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();

// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

• Demo 1

Demo 1

Apply ifixpng to image with id #logo.

<img src="/uzhana.png" id="logo" style="border:2px dashed #FF0000;margin:3px;" />

$('#logo').pngfix();

click here to toggle ifixpng/iunfixpng

$('#switch').toggle(function(){
	$('#logo').iunfixpng();
}, function(){
    $('#logo').ifixpng();
});

• Demo 2

Demo 2

<img src="/uzhana2.png" id="logo2" style="border:2px dashed #FFF;margin:2px;" />

Apply ifixpng to image with id #logo2 and chain css property as well as click event.

$('#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is so cool!'); });

• Demo 3

<div id="nice" style="width:379px;height:117px;border:2px dashed #FFF;
            background:url(images/ifixpng-logo-writing.png) no-repeat;"></div>

$.ifixpng('media/pixel.gif');
$('div#nice').ifixpng();

• Demo 4

<div style="text-align:center;">
	<div id="dude2" style="background:url(images/ifixpng-funny-dude.png) 
                    width:225px;height:220px;border:2px dashed #FFF;">
            <a href="http://www.khurshid.com" target="_blank">www.khurshid.com</a>
            <br />
            <a href="http://www.jquery.com" target="_blank">www.jquery.com</a>
	</div>
</div>
            

Credits

Jason from www.consil.co.uk
Fil
maserG
jonahfox
J. Zaefferer - bassistance.de

Site using the plugin

Let me know about the sites using the plugin, if you know any.

• Online catalogue of Uzbek craft

• simplyselling.net

• poseprints.com

Contact

Please feel free to contact me at jquery[at]khurshid[dot]com.

or