Results 1 to 4 of 4

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

  1. #1
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    1) Script Title: Gradual Element Fader

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...adualfader.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/dynamici...hlightgrad.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.

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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:

    Code:
    <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/s...rent_67_32.htm

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    - Tina

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •