internet explorer: semi-transparent images

Question

I have the two images below.

They are the same image, with one having a slight glow effect on the text.

They are setup as below:

<div id="header"><a></a></div> withe the original image being the background for the div, and the 'glow' image being the background for the anchor tag, with display:block; width: 100%; height: 100%;opacity: 0;

i am the using the below jquery code

$('#header a').hover(
  function() {$(this).animate({"opacity":"1"}, 1000);},
  function() {$(this).animate({"opacity":"0"}, 1000);});

to fade the anchor image in and out on hover.

this works fine in firefox, chrome ect. But in internet explorer the image is given a solid black background where there is transparency.

How can i fix this?

NB: I am only worried about ie7/8 not 6.

http://webspirited.com/header-reachsniper.png http://webspirited.com/header-reachsniper-hover.png

---

Update
I have decided that this is simply not worth my time to do in internet explorer.

However this works perfectly in ie9, so i guess ill remove this effect for browsers less that ie9.

Answer 1

In order to set the opacity of a transparent PNG image, you need to use the AlphaImageLoader filter, even in IE8.

EDIT: You also need to add the alpha filter in the CSS, like this:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);

Otherwise, jQUery will clear the existing filter as it adds the alpha filter.