Posted By

jonhenshaw on 04/02/08


Tagged

ie png transparency ie6 transparent


Versions (?)

Who likes this?

8 people have marked this snippet as a favorite

basicmagic
eny_genao
orhanveli
Akiva
shilguhn
nightowl
seanpowell
warren


jquery IE6 Transparent PNG Fix


 / Published in: JavaScript
 

URL: http://jquery.khurshid.com/ifixpng.php

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!

  1. /*
  2.  * jQuery ifixpng plugin
  3.  * (previously known as pngfix)
  4.  * Version 2.0 (04/11/2007)
  5.  * @requires jQuery v1.1.3 or above
  6.  *
  7.  * Examples at: http://jquery.khurshid.com
  8.  * Copyright (c) 2007 Kush M.
  9.  * Dual licensed under the MIT and GPL licenses:
  10.  * http://www.opensource.org/licenses/mit-license.php
  11.  * http://www.gnu.org/licenses/gpl.html
  12.  */
  13.  
  14. /**
  15.   *
  16.   * @example
  17.   *
  18.   * optional if location of pixel.gif if different to default which is images/pixel.gif
  19.   * $.ifixpng('media/pixel.gif');
  20.   *
  21.   * $('img[@src$=.png], #panel').ifixpng();
  22.   *
  23.   * @apply hack to all png images and #panel which icluded png img in its css
  24.   *
  25.   * @name ifixpng
  26.   * @type jQuery
  27.   * @cat Plugins/Image
  28.   * @return jQuery
  29.   * @author jQuery Community
  30.   */
  31.  
  32. (function($) {
  33.  
  34. /**
  35. * helper variables and function
  36. */
  37. $.ifixpng = function(customPixel) {
  38. $.ifixpng.pixel = customPixel;
  39. };
  40.  
  41. $.ifixpng.getPixel = function() {
  42. return $.ifixpng.pixel || 'images/pixel.gif';
  43. };
  44.  
  45. var hack = {
  46. ltie7 : $.browser.msie && $.browser.version < 7,
  47. filter : function(src) {
  48. return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='"+src+"')";
  49. }
  50. };
  51.  
  52. /**
  53. * Applies ie png hack to selected dom elements
  54. *
  55. * $('img[@src$=.png]').ifixpng();
  56. * @desc apply hack to all images with png extensions
  57. *
  58. * $('#panel, img[@src$=.png]').ifixpng();
  59. * @desc apply hack to element #panel and all images with png extensions
  60. *
  61. * @name ifixpng
  62. */
  63.  
  64. $.fn.ifixpng = hack.ltie7 ? function() {
  65. return this.each(function() {
  66. var $$ = $(this);
  67. var base = $('base').attr('href'); // need to use this in case you are using rewriting urls
  68. if ($$.is('img') || $$.is('input')) { // hack image tags present in dom
  69. if ($$.attr('src')) {
  70. if ($$.attr('src').match(/.*\.png([?].*)?$/i)) { // make sure it is png image
  71. // use source tag value if set
  72. var source = (base && $$.attr('src').substring(0,1)!='/') ? base + $$.attr('src') : $$.attr('src');
  73. // apply filter
  74. $$.css({filter:hack.filter(source), width:$$.width(), height:$$.height()})
  75. .attr({src:$.ifixpng.getPixel()})
  76. .positionFix();
  77. }
  78. }
  79. } else { // hack png css properties present inside css
  80. var image = $$.css('backgroundImage');
  81. if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
  82. image = RegExp.$1;
  83. $$.css({backgroundImage:'none', filter:hack.filter(image)})
  84. .children().children().positionFix();
  85. }
  86. }
  87. });
  88. } : function() { return this; };
  89.  
  90. /**
  91. * Removes any png hack that may have been applied previously
  92. *
  93. * $('img[@src$=.png]').iunfixpng();
  94. * @desc revert hack on all images with png extensions
  95. *
  96. * $('#panel, img[@src$=.png]').iunfixpng();
  97. * @desc revert hack on element #panel and all images with png extensions
  98. *
  99. * @name iunfixpng
  100. */
  101.  
  102. $.fn.iunfixpng = hack.ltie7 ? function() {
  103. return this.each(function() {
  104. var $$ = $(this);
  105. var src = $$.css('filter');
  106. if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) { // get img source from filter
  107. src = RegExp.$1;
  108. if ($$.is('img') || $$.is('input')) {
  109. $$.attr({src:src}).css({filter:''});
  110. } else {
  111. $$.css({filter:'', background:'url('+src+')'});
  112. }
  113. }
  114. });
  115. } : function() { return this; };
  116.  
  117. /**
  118. * positions selected item relatively
  119. */
  120.  
  121. $.fn.positionFix = function() {
  122. return this.each(function() {
  123. var $$ = $(this);
  124. var position = $$.css('position');
  125. if (position != 'absolute' && position != 'relative') {
  126. $$.css({position:'relative'});
  127. }
  128. });
  129. };
  130.  
  131. })(jQuery);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: diolt on July 20, 2011

Oh man this also is not working, i am really tired of fixing png error.. can someone tell me to fix png for http://www.diolt.com

You need to login to post a comment.