A good png alpha transparent fix for IE6...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

A good png alpha transparent fix for IE6...

Post by JellyFish »

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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

there's an .htc file somewhere that fixes it~!321
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

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.

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>
Then create an iehax_onlyie.css file and place this inside...

Code: Select all

img.iehaxblank { display: inline ! important }

img.iehaximg { display: none ! important }

Then for each image...

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"/>
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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

It's not easy. :D
Damn right! Come to find that background pngs are a hopeless case... :( I only wish microsoft was more like microsoft rather then microsucks... I guess I'd just have to forget .pngs, maybe use flash.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

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.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

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.

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;
}
Then you can use the following syntax for your PNG images.

Code: Select all

{insert name="img" src="yourimagename.png" width="100" height="100"}
The name argument MUST be img.

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.
This is just as easy as using

Code: Select all

<img src="yourimagename.png" alt="image" width="100" height="100" border="0">
Just use

Code: Select all

{insert name="img" src="yourimagename.png" width="100" height="100"}
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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

that's awesome, AKA PJ! I've been meaning to start using template_lite as I've heard only good things. I'm writing a simple press release application right now and I think it would be the perfect project to get my feet wet with template_lite. It uses adodb_lite already :D
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

JellyFish wrote:A good png alpha transparent fix for IE6...
Mozilla Firefox

(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).
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

Kieran Huggins wrote:Seriously though:
WebFX: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
This is what I was trying to point out, earlier. As far as I know, it is the least painful method.
Post Reply