Pngfix (loop?) problem

[memole]

Hi.
After uploading png.js to my website, my menu png files loads to infinity. There is a never-ending download with ie (I tested with ie6) untill I refresh it. After the refresh the problem disappears also for the other pages. I tried to find the problem in the js files (png.js for png rollover and pngfix,js for trasparent png) but my javascript ability are not so good.
I think the problem is in the var name of the onmouseout function, but I'm not sure. The png.js was written for frame rollover (http://www.photoshoplab.com/fun-with-transparent-png-images.html) and maybe I use it in a wrong way.
My site is http://www.rockinthemiddle.com
Anyone can help me?

P.S. I found out another possible solution for png rollover here: http://homepage.ntlworld.com/bobosola/png_mouseover.htm but to use it i have to write again to many pages and rename all my images...

P.P.S. Excuse me for my elementary english...I'm italian.

[Basil]

Try this..

<!--[if lt IE 7]>
<script type="text/javascript">
var l = document.getElementsByTagName('img');
for(i=0;i<l.length;i++){
p = 'http://semlar.biz/clear.gif'; //copy this image to your server and change this url
n = l[i].getAttribute('src');
g = n.toLowerCase();
if(g.substring(g.length-3)=="png"){
l[i].setAttribute('src',p);
l[i].style.cssText="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+n+"')";
}
}
</script>
<![endif]-->

You need to copy this (http://semlar.biz/clear.gif) 1x1 transparent gif to your server and change the bit of code to point to the image on your own server.

What it does is loop through all your images and if it finds a png file it adds a certain style to it so that IE will display it properly, it needs the transparent gif to fill in the area because IE will display a red X over the image if you don't.

I don't know about the rollover business, this is just for replacing the pngfix.

[memole]

thankyou for the replay,
I tried this code on one of my pages: www.rockinthemiddle.com/Webcams/3.html (http://www.rockinthemiddle.com/webcams/3.html) but it doesn't work for rollover and not even for trasparent png. I did a copy and paste of your code, changing only the location of the clear.gif...so where is the mistake?

[Basil]

Yeah, sorry, I should have probably mentioned that it has to be loaded after the page is.

<!--[if lt IE 7]>
<script type="text/javascript">
function fixpngs(){
var l = document.getElementsByTagName('img');
for(i=0;i<l.length;i++){
p = 'http://www.rockinthemiddle.com/sfondo/clear.gif';
n = l[i].getAttribute('src');
g = n.toLowerCase();
if(g.substring(g.length-3)=="png"){
l[i].setAttribute('src',p);
l[i].style.cssText="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+n+"')";
}
}
}

window.onload = fixpngs;
</script>
<![endif]-->

I think I'm going to mess with this a bit and see if I can't improve it.

[memole]

Yes!
Something is working...
http://www.rockinthemiddle.com/webcams/3.html
I copied it at the end of my page, just before the tag </html>. Now the trasparent works, the rollover no as you said.
The loop is gone and the problem was the pngfix.js file. Now I need to resolve the rollover function because your code doesn't work together with the png.js file.
I'm trying to coming out of it...maybe using CSSrollover...but I'm not sure it will work.
If you improve this, please let me know it...if I find a solution I'll do the same...
Thankyou very much again

[Basil]

Alright, here's what I've come up with. It could probably be written better but you can mess with it yourself if you want.

The part before the first javascript was just for me to test it.
<style type="text/css">body {background-color: #f00}</style>

<img src="http://www.rockinthemiddle.com/sfondo/Photo.png" roll="true"><br/>
<img src="http://www.rockinthemiddle.com/sfondo/Video.png" roll="yep">

<script type="text/javascript">
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
new Function;
}
}

function rollup(){
var l = document.getElementsByTagName('img');
for(i=0;i<l.length;i++){
if(l[i].getAttribute('roll')) {
addEvent(l[i],'mouseover',swap2);
addEvent(l[i],'mouseout',swap2);
}
}
}

function swap2(){
suffix = '1';
n = this.src;
if(n.substring(n.length-(suffix.length+4)) == suffix+'.png') {
this.src = n.substring(0,n.length-(suffix.length+4))+'.png';
} else {
this.src = n.substring(0,n.length-4)+suffix+'.png';
}
}

window.onload = rollup;
</script>

<!--[if lt IE 7]>
<script type="text/javascript">
function fixpngs(){
var l = document.images;
for(i=0;i<l.length;i++){
lw = l[i].width; lh = l[i].height;
p = 'http://www.rockinthemiddle.com/sfondo/clear.gif';
n = l[i].getAttribute('src');
g = n.toLowerCase();
if(g.substring(g.length-3)=="png"){
l[i].setAttribute('src',p);
l[i].width = lw;
l[i].height = lh;
l[i].style.cssText="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+n+"')";
if(l[i].getAttribute('roll')) {
l[i].onmouseover = swap;
l[i].onmouseout = swap;
}
}
}
}

function swap() {
suffix = '1';
n = this.filters(0).src;
if(n.substring(n.length-(suffix.length+4)) == suffix+'.png') {
this.filters(0).src = n.substring(0,n.length-(suffix.length+4))+'.png';
} else {
this.filters(0).src = n.substring(0,n.length-4)+suffix+'.png';
}
}

window.onload = fixpngs;
</script>
<![endif]-->

[memole]

Works great!
Thankyou very much for the help and specially for the patience!!!
I made two different js files with your code. Now I will update with this every page of my website :D
Thanks again!