Welcome to Geeklog, Anonymous Thursday, March 28 2024 @ 06:23 am EDT

Geeklog Forums

transparent PNG support in IE for geeklog themes


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("/layout/steuben/pngbehavior.htc");
 


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

Text Formatted 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 = "/layout/steuben/theme-images/pixel.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>


 


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
 Quote

Status: offline

jhk

Forum User
Chatty
Registered: 07/13/02
Posts: 57
Nice, but unfortunately the "behavior" attribue is not valid CSS2. Confused
It is yet another Microsoft hack meant to solve a problem which wouldn't exist if they had coded IE6 properly a long, long time ago.
I use Mishoo's PieNG script whenever I need transparent PNGs.
 Quote

All times are EDT. The time is now 06:23 am.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content