Welcome to Geeklog, Anonymous Friday, November 08 2024 @ 08:54 pm EST
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
IMG {behavior: url("/layout/steuben/pngbehavior.htc");
Then create a file called pngbehavior.htc and place this in the file
<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() &#123;
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
&#125;;
function fixImage() &#123;
// get src
var src = element.src;
// check for real change
if (src == realSrc) &#123;
element.src = blankSrc;
return;
&#125;
if ( ! new RegExp(blankSrc).test(src)) &#123;
// backup old src
realSrc = src;
&#125;
// test for png
if ( /.png$/.test( realSrc.toLowerCase() ) ) &#123;
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
&#125;
else &#123;
// remove filter
element.runtimeStyle.filter = "";
&#125;
&#125;
</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
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() &#123;
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
&#125;;
function fixImage() &#123;
// get src
var src = element.src;
// check for real change
if (src == realSrc) &#123;
element.src = blankSrc;
return;
&#125;
if ( ! new RegExp(blankSrc).test(src)) &#123;
// backup old src
realSrc = src;
&#125;
// test for png
if ( /.png$/.test( realSrc.toLowerCase() ) ) &#123;
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
&#125;
else &#123;
// remove filter
element.runtimeStyle.filter = "";
&#125;
&#125;
</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
8
7
Quote
Status: offline
jhk
Forum User
Chatty
Registered: 07/13/02
Posts: 57
Nice, but unfortunately the "behavior" attribue is not valid CSS2. 
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.
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.
7
8
Quote
All times are EST. The time is now 08:54 pm.
- 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