ie et les PNG transparents... - Page 1

... qui semblent complètement incompatible...

J'utilise ce petit script que j'ai trouvé je ne sais plus sur quel site :

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 var imgAttribs = img.attributes;
		 for (var j=0; j<imgAttribs.length; j++)
			{
			var imgAttrib = imgAttribs[j];
			if (imgAttrib.nodeName == "align")
			   {		  
			   if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
			   if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
			   break
			   }
            }
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);

Il applique la fonction AlphaImageLoader à tous les PNG du document. Ca marche plus ou moins bien (les images sont un peu déformées), mais ça corrige le problème.

Mais j'utilise les fonction 'rollover' de Dreamweaver pour modifier les images au passage de la souris, et là le script ne marche plus du tout.
Le script généré par Dreamweaver est :

<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

(...)
<a href="www...." onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image','','image1.png',1)"><img name="Image" border="0" src="image2.png" width="12" height="12"></a>

Qu'est-ce que je pourrais faire pour corriger le script de Dreamweaver, ou quel autre script de rollover pourrais-je utiliser ?

(je n'y connais pas grand chose en HTML, et rien du tout en Javascript)

A vue de nez :
* dans le script MS, rajouter un imgName qui fait exactement la même chose que imgID pour la propriété "name"
* dans le script MS, rajouter strNewHTML += " src='"+img.src+"' "
* dans le script MS, transformer strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" en strNewHTML += "(sizingMethod='scale', src=\'" + img.src + "\');\"></span>"
* dans le script Macromedia, transformer (uniquement lorsqu'on utilise IE) les x.src=value en x.style=substr(x.style,blablabla)+value+"');" (tu es bien assez grand pour trouver "blablabla" tout seul ^^ je connais pas trop les fonctions de chaînes en JavaScript)