IE Fix transparency and Rollovers

[(¯`•DregondRahl•._)]

Saw someone wanting a method to fix the transparency problem for rollovers. this one is very basic fix but will work for websites or PB templates.




<script type="text/Javascript">
<!--
// Fix transparency and Rollovers

if (!window.XMLHttpRequest && document.body.filters) {

        e = "DXImageTransform.Microsoft.AlphaImageLoader"
        for(i = 0; i < document.images.length; i ++) {
                img = document.images
                if (img.src.match(/(.png|.gif)/i)){
                        imgUrl = img.getAttribute("src");
                        img.style.cssText = 'filter:progid:'+ e +'(src=' + imgUrl + ', sizingMethod="scale")';
                        img.style.height = img.height;
                        img.style.width = img.width;
                        img.setAttribute("src", "http://s4.images.proboards.com/blank.gif");
                }
                if(img.filters[e].src.match(/_o(n|ff)/)) {
                        img.onmouseover = function(){ this.filters[e].src = this.filters[e].src.replace("_off", "_on"); };
                        img.onmouseout = function() { this.filters[e].src = this.filters[e].src.replace("_on", "_off"); };
                }
        }
}

//-->
</script>




you have to save the normal image with _off at the end of its name
yourhost.com/home_off.png


and the rollover image with _on at the end of its name
yourhost.com/home_on.png


the code will automatically switch the URL from _off to _on when you mouseOver it.

[virtuoso]

Not bad, thought I've seen some other ways, potentially simpler, to conquer the problem.

But good job.

[(¯`•DregondRahl•._)]

actually this should be one of the simplest ways of doing it because it leave all the attributes in the img tags, and it works with rollovers, most versions on the net do not support rollovers.

[Me]

Does setAttribute work in firefox? I remember having issues with it in the past.

[[ $©Ø®Þ!@Ω™ ]]

The code doesn't need to even load in Firefox, since Firefox can actually display PNGs correctly. Thus, it doesn't really matter, right?

[Me]

scorpian8867 said:

The code doesn't need to even load in Firefox, since Firefox can actually display PNGs correctly. Thus, it doesn't really matter, right?

Yeah, I guess you're right .

[virtuoso]

Yeah. And, setAttribute does work in Firefox. Even though you can directly target the attribute...

img.src="blah....";