gradualfader doesn't work right with transparent PNGs in IE?

[iceytina]

1) Script Title: Gradual Element Fader

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/gradualfader.htm

3) Describe problem:

The script works 100% great in all popular browsers except IE8 (have not checked in IE7 or IE9). My menu are transparent PNG images and in IE, the transparency doesn't work. It makes a nasty dark gray color around the image where it would be transparent:
http://thewhitemusketeer.netthrilldesigns.com/magic.php

I've removed the other scripts before and it didn't help. Only removing gradualfader worked to make the image transparency show in IE.

I also tried http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm with the same result: transparency wouldn't work in IE8.

No idea how to make transparency work with this? I know I could make them JPGs or GIFs but the other pages (not uploaded) on that site have gradiated bg images, sometimes images, with variable heights. GIFs wouldn't show the outer glow well.

[traq]

this might be your answer. (http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-t2063.html)

[jscheuer1]

You could do that, essentially make the images ordinary, non-alpha channel images. Or you could get rid of the script, replace this in the head:


<script type="text/javascript" src="gradualfader.js">
/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

with:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var ie8 = false;
/*@cc_on @*//*@if(@_jscript_version >= 5)if($.browser.version < 9){ie8 = true;}@end @*/
$('.gradualfader').each(function(){
if(!ie8){this.style.opacity = 0.5; return true;}
var im = this;
$(new Image()).bind('load error', function(){
im.style.width = this.width + 'px';
im.style.height = this.height + 'px';
im.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')";
im.src = 'transparent_67_32.gif';
$(im).css({opacity: 0.5});
}).attr('src', im.src);
}).hover(function(){
$(this).stop(true, true).animate({opacity: 1});
}, function(){
$(this).stop(true, true).animate({opacity: 0.5});
});
});
</script>

Get rid of this as well:


<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>

And you'll need the image highlighted in the above code:

http://home.comcast.net/~jscheuer1/side/transparent_67_32.htm

I gave it some background so you can see it to save it.

[iceytina]

Thanks both of you for your responses =) John's solution worked perfectly! I'm very grateful. Thanks again!

- Tina