Comments on: Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks

By: dustin

dustin — Fri, 18 Feb 2011 22:56:14 +0000

Excellent! By far the easiest png fix I’ve ever implemented, and no need to load extra JS. Nice work.

By: Joanne

Joanne — Tue, 10 Aug 2010 10:35:19 +0000

Fantastic, this fixed my bug, thanks so much!

By: Tomaz Vovk

Tomaz Vovk — Tue, 29 Jun 2010 06:01:39 +0000

I wanted to show the final markup in my previous post but it didn’t display as I wanted, so I’ll write it again using square brackets instead of greater & later signs. The final markup should be:
[div class=”myimage][a href=”mylink”]My link[/a][/div]

By: Tomaz Vovk

Tomaz Vovk — Mon, 28 Jun 2010 10:15:09 +0000

@Cflex:
Instead of adding a transparent gif, you could simply create a link with this css:

.myimage a {
display:block;
text-indent:-99999px;

width:128px;
height:128px;

position:relative;
z-index:10;
}

128px are width and height of your image (div or whatever you use). Position:relative fixes the problem where you couln’t click on the “image”.

So in the end you have

My link

Hope this helps

By: Cflex

Cflex — Fri, 11 Jun 2010 19:40:49 +0000

For me this is a great step in the right direction. My problem is that we were using PNG 24 images for linking purposes in some cases; clicking on the PNG 24 would take you somewhere else. With your solution, embedding the PNG 24 into the background means there's nothing to click on to link to another page. I can see the graphic, but can't click it. And I can't use the png itself or I'll wind up with 2 images. So I created a 1x1px transparent gif, that I can use in place of the png as the href linked element. The .gif has been stretched out so it effectively covers the dimensions of the PNG that is embedded in the background with CSS. And you can click the .gif, which you never see, and it feels like your clicking on the PNG, and the effect is the same: you're taken to the linked page. However in IE6, wherever the .png 24 graphic exists, the .gif is not clickable. Only in the Alpha areas can I click and get the linked page. Any ideas on how I can get this to do what I want?

By: evanmcd

evanmcd — Sat, 20 Mar 2010 04:06:31 +0000

Bummer. Didn’t work for me. Loved the idea of the solution, but nothing I did could get it to take.

#navMain a:hover, #navMain a.CMSListMenuLinkHighlighted
{
background:transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’/Assets/images/navMainOverArrow.png’, sizingMethod=’scale’);
}

Thanks anyway… on to the next method.

By: núria

núria — Mon, 15 Feb 2010 11:32:28 +0000

thank you so much!!!

By: .abelafonte

.abelafonte — Thu, 24 Sep 2009 21:21:33 +0000

You must ensure that your link to IE stylesheets is AFTER your default stylesheet.

Also, you will have better success by referencing images absolutely, not relatively.

For example: use url(/images/truck.png) rather than url(../../images/truck.png)

or wherever your images live.

By: Max

Max — Thu, 24 Sep 2009 20:56:19 +0000

nice solution. However I had a problem implementing it. It work as inline style or embedded style, but does not work if I put it in external style sheet.
Any help or advise are welcome.
I did check all paths

By: .abelafonte

.abelafonte — Tue, 18 Aug 2009 15:30:47 +0000

The alphaImageLoader doesn’t take any CSS properties. You cannot specify position, etc.