Thread: IE6 PNG Fix
View Single Post
  #2  
Old 07-07-2008, 05:50 AM
  Yurij's Avatar 
Yurij Yurij is offline
Banned
 

X-Adept
  
Join Date: Jan 2008
Posts: 486
 

Default Re: IE6 PNG Fix

Quote:
Originally Posted by admin@centrihost.com
Hello, I'm attempting to use a couple of transparent PNG's and the usual fixes don't seem to work for some reason. Anyone have any ideas?

I'm using Version 4.1.10 for this cart.

Thanks!

Var. 1. Exampl. for background in css file...
PHP Code:
.test
{  
    
backgroundurl('images/test.png');
    
background-repeatno-repeat;
    -
background-imagenone;
    -
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src=skin1/images/test.png,sizingMethod=crop);



Var 2. Png images.

Example:
PHP Code:
<img src="{$ImagesDir}/shadow.png"  style="BEHAVIOR: url({$ImagesDir}/png.htc);" /> 


Create a new file "skin1/images/png.htc":
PHP Code:
<public:component>
<public:
attach event="onpropertychange" onevent="propertyChanged()" />
<
script>
var 
supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var 
realSrc;
var 
blankSrc "skin1/images/spacer.gif";

if (
supportedfixImage();

function 
propertyChanged() {
   if (!
supported) return;
   
   var 
pName event.propertyName;
   if (
pName != "src") return;
   
// if not set to blank
   
if ( ! new RegExp(blankSrc).test(src))
      
fixImage();
};

function 
fixImage() {
   
// get src
   
var src element.src;

   
// check for real change
   
if (src == realSrc) {
      
element.src blankSrc;
      return;
   }

   if ( ! new 
RegExp(blankSrc).test(src)) {
      
// backup old src
      
realSrc src;
   }
   
   
// test for png
   
if ( /\.png$/.testrealSrc.toLowerCase() ) ) {
      
// set blank image
      
element.src blankSrc;
      
// set filter
      
element.runtimeStyle.filter "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     
src "',sizingMethod='scale')";
   }
   else {
      
// remove filter
      
element.runtimeStyle.filter "";
   }
}

</
script>
</public:
component
Reply With Quote