Need help modifying this script!

[kan3xiao]

Hello everyone - I have a horizontally scrolling site with a fixed position menu. The menu has a .png background image set with CSS with some transparency. I'm using jQuery to fade the menu out and then back in again while the page scrolls. It works beautifully in FF and Chrome, but in IE, when the fadeOut starts, and just before the fadeIn ends, the area that should be transparent becomes black. It's only for a split second but it ruins the effect and its very noticeable.

After hours of searching and trying different solutions for IE png problems, I finally found one that solves my issue. The code was written by this genius and here it is below:

var i;
  for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

However, this script searches for ALL .png images on my page and applies the filter. I'm worried this will cause some performance issues as there are a LOT of .png files on my page, but I only need to apply this to one image.

Can anyone help me modify this function so that I can just have it applied to the one image? Again, this is a div background image, not just a normal image on the page. The div ID is #menu. I'm not sure if that makes a difference in getting the src. Also, I'm not sure if absolute or relative paths are required so...

/index.php -> the webpage
/js/functions.js -> the js file with the javascript code
/images/design/menu.png -> the path to the .png file I want to apply this filter to

Any help would be greatly appreciated!

[Philip M]

Presumably

document.getElementByid("theimageID").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader

[kan3xiao]

Hey Philip,

Thanks for the answer. However, as I said, the image is a div background image set in CSS. Therefore, the image itself has no ID, only the div. If I put the ID of the div in, that doesn't work, of course. I guess I have to save the src of the background image in a variable and and apply the filter to that variable? Any ideas?

[DanInMa]

have you tried applying the filter to the div with CSS?

[kan3xiao]

Originally Posted by DanInMa

have you tried applying the filter to the div with CSS?

Just tried....that didn't work either. The only thing that seems to work is that script, but that's applying the filter to ALL of my .png images. I only need to use it on one.