A good png alpha transparent fix for IE6...
Moderator: General Moderators
A good png alpha transparent fix for IE6...
Could I get some opinions on a good Javascript png fix for IE6? Some links maybe? I've been googling for some sources and couldn't find the one I'm looking for...
I'm looking for a piece that I could include in my pages where I don't have to write browser checks every time I write a img tag. And one where the code maybe executes again every time a new .png is loaded.
Hopefully I've expressed my self clearly.
Thanks taking the time to read my post.
I'm looking for a piece that I could include in my pages where I don't have to write browser checks every time I write a img tag. And one where the code maybe executes again every time a new .png is loaded.
Hopefully I've expressed my self clearly.
Thanks taking the time to read my post.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
- AKA Panama Jack
- Forum Regular
- Posts: 878
- Joined: Mon Nov 14, 2005 4:21 pm
It's not easy. 
What I did was create a plugin for Template Lite that would basically do it all for you.
It's still a pain in the butt.
Place this between your head tags.
Then create an iehax_onlyie.css file and place this inside...
Then for each image...
Change the width and height attribites to fit your image size. It does work and like I said it's a pain in the butt to work with. All that extra code just to support a PNG with alpha transparency. Something Microsoft should have fixed many, many years ago.
What I did was create a plugin for Template Lite that would basically do it all for you.
It's still a pain in the butt.
Place this between your head tags.
Code: Select all
<!--[if IE]>
<link rel="stylesheet" href="iehax_onlyie.css" type="text/css" media="all" charset="utf-8" />
<![endif]-->
<style type="text/css">
<!--
span.iehax { display: none; }
img.iehaxblank { display: none; }
-->
</style>
Code: Select all
img.iehaxblank { display: inline ! important }
img.iehaximg { display: none ! important }
Code: Select all
<!--[if IE]>
<span class="iehax"
style="height: 100px;
width: 100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='planetoo1.png',sizingMethod='scale');
display:inline; position:absolute; ">
</span>
<![endif]-->
<img class="iehaxblank" width="100" height="100" src="images/spacer.gif" alt="." border="0"/>
<img class="iehaximg" src="planetoo1.png" alt="" width="100" height="100" border="0"/>
yea you can't really use pngs for background images (well at least pngs with alpha transparency). I use this script when I need to fix the bug for regular images (with width and height attributes).
http://homepage.ntlworld.com/bobosola/
It really is a shame that the corporation who has the biggest influence on our jobs loves to give us the finger.
http://homepage.ntlworld.com/bobosola/
It really is a shame that the corporation who has the biggest influence on our jobs loves to give us the finger.
- AKA Panama Jack
- Forum Regular
- Posts: 878
- Joined: Mon Nov 14, 2005 4:21 pm
If you are using Template Lite or Smarty you can use the following {insert} tag for your templates.
The following function can be placed anywhere in your code just as long as it is available when the display method is called by the template class. Just make sure you have a standard 1 pixel x 1 pixel transparent spacer.gif in the images directory.
Then you can use the following syntax for your PNG images.
The name argument MUST be img.
Argument List
Just use
instead of the normal image tag. I am using the above code in 6 different templates for the AATraders Game and it is working flawlessly.
The following function can be placed anywhere in your code just as long as it is available when the display method is called by the template class. Just make sure you have a standard 1 pixel x 1 pixel transparent spacer.gif in the images directory.
Code: Select all
function insert_img($params, &$tpl) {
$class = (isset($params['class']) ? " class=\"iehax " . $params['class'] . "\" " : " class=\"iehax\" ");
$id = (isset($params['id']) ? " id=\"" . $params['id'] . "\" " : "");
$style = (isset($params['style']) ? " style=\"" . $params['style'] . "\" " : " ");
$border = (isset($params['border']) ? $params['border'] : 0);
$alt = (isset($params['alt']) ? $params['alt'] : "image");
static $firsttime = 0;
$str = '';
if($firsttime == 0)
{
$firsttime = 1;
$str = '
<style type="text/css">
<!--
span.iehax { display: none; }
img.iehaxblank { display: none; }
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
img.iehaxblank { display: inline ! important }
img.iehaximg { display: none ! important }
-->
</style>
<![endif]-->
';
}
$str .= '
<!--[if IE]>
<span ' . $id . $class . '
style="height: ' . $params['height'] . 'px;
width: ' . $params['width'] . 'px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' .
$params['src'] . '\',sizingMethod=\'scale\');
display:inline; position:absolute; ">
</span>
<![endif]-->
<img class="iehaxblank" width="' . $params['width'] . '" height="' . $params['height'] . '"
src="images/spacer.gif" alt="." border="' . $border . '"/>
<img class="iehaximg" src="' . $params['src'] . '" alt="' . $alt . '"
width="' . $params['width'] . '" height="' . $params['height'] . '" border="' . $border . '"/>';
return $str;
}
Code: Select all
{insert name="img" src="yourimagename.png" width="100" height="100"}
Argument List
- src = (Required) The path and image to display. IE: "images/cat.png"
width = (Required) The actual width of the image
height = (Required) The actual height of the image
alt = (Optional) The alt tag information. If missing it will be called "image".
border = (Optional) The border size around the image. Default is 0.
style = (Optional) Any style attributes you would like to assign the image.
id = (Optional) An ID name you would like to assign the image.
class = (Internal) Do not use this argument.
Code: Select all
<img src="yourimagename.png" alt="image" width="100" height="100" border="0">
Code: Select all
{insert name="img" src="yourimagename.png" width="100" height="100"}
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
Mozilla FirefoxJellyFish wrote:A good png alpha transparent fix for IE6...
(It had to be said....)
Seriously though:
There's IE7 (the javascript fix, not the browser) http://dean.edwards.name/IE7/
WebFX: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
and others, Googling will report many more.
I've used both of the above, but preferred the WebFX library for it's smaller footprint.
You can see it in action here (in ie6, of course).
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
This is what I was trying to point out, earlier. As far as I know, it is the least painful method.Kieran Huggins wrote:Seriously though:
WebFX: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html