X-Cart forums

[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!

[Yurij]

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
{  
    background: url('images/test.png');
    background-repeat: no-repeat;
    -background-image: none;
    -filter: progid: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 (supported) fixImage();

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$/.test( realSrc.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>