Forum Preview

03/15/05 11:35pm

Status: offline

trinity

Forum User

Regular Poster

Registered: 01/30/05

Posts: 80

I found an interesting way to add suport for transparent PNG images when the site is veiwed in Internet Explorer useing a css trick unique to IE

place this in your stlyesheet of your theme

Text Formatted Code

IMG {behavior: url(&quot;/layout/steuben/pngbehavior.htc&quot;);

Then create a file called pngbehavior.htc and place this in the file

Text Formatted Code

&lt;public:component&gt;

&lt;public:attach event=&quot;onpropertychange&quot; onevent=&quot;propertyChanged()&quot; /&gt;

&lt;script&gt;

var supported = /MSIE (5.5)|[6789]/.test(navigator.userAgent) &amp;&amp; navigator.platform == &quot;Win32&quot;;

var realSrc = &quot;&quot;;

var blankSrc = &quot;/layout/steuben/theme-images/pixel.gif&quot;;

if (supported) fixImage();

function propertyChanged() &amp;#123;

   if (!supported) return;

   var pName = event.propertyName;

   if (pName != &quot;src&quot;) return;

   // if not set to blank

   if ( ! new RegExp(blankSrc).test(src))

      fixImage();

&amp;#125;;

function fixImage() &amp;#123;

   // get src

   var src = element.src;

   // check for real change

   if (src == realSrc) &amp;#123;

      element.src = blankSrc;

      return;

   &amp;#125;

   if ( ! new RegExp(blankSrc).test(src)) &amp;#123;

      // backup old src

      realSrc = src;

   &amp;#125;

   // test for png

   if ( /.png$/.test( realSrc.toLowerCase() ) ) &amp;#123;

      // set blank image

      element.src = blankSrc;

      // set filter

      element.runtimeStyle.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot; +

                                     src + &quot;',sizingMethod='scale')&quot;;

   &amp;#125;

   else &amp;#123;

      // remove filter

      element.runtimeStyle.filter = &quot;&quot;;

   &amp;#125;

&amp;#125;

&lt;/script&gt;

&lt;/public:component&gt;

then create a 1 pixel transparent GIF called pixel.gif and place it where you keep your images in your theme

modify the paths in the css and .htc files for where you placed everything

this hack should fail gracefuly for other browsers

for more information goto http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Trinity

glFusion - Technology Fused with Style - www.gllabs.org

trinity

jhk