Hailwood
Hailwood

Reputation: 92581

internet explorer: semi-transparent images

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.

Upvotes: 3

Views: 612

Answers (2)

Yi Jiang
Yi Jiang

Reputation: 50095

This post from Dave Shea's mezzoblue.com may help you: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

It notes all of the methods which he tried, and the final solution he arrived at the end:

What did work was a little library called DD_belatedPNG that applies PNG transparency via VML instead of AlphaImageLoader. It’s designed for IE6, but it works just fine in IE7 as well. For IE8, I was forced to throw out an X-UA-Compatible meta tag and step IE8 down to IE7 mode for this particular page.

With a tiny caveat at the end

It’s still not perfect. I noticed a faint white bounding box poking through at lower opacities that forced me to slightly adjust hover effects for all versions of IE. But you know, for all that, it’s darn well good enough.

Upvotes: 0

SLaks
SLaks

Reputation: 887215

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.

Upvotes: 2

Related Questions