Bonjour
J'ai programmé une site web qui utilise beaucoup d'image png transparente.
Toutes ces images png forme le design du site et sont donc en background dans des div.

Je voudrai rendre mon site compatible sur IE6. J'ai donc fait des recherche et je suit tombé sur ce site : http://labs.unitinteractive.com/unitpngfix.php qui propose un script gratuit en qui permet de voir les iages PNG transparentes sous IE6.

Le script fonctionne, mais il y a un problème. Tout mes élément positionné en "absolute" disparaisse de ma page.
Venan tout juste de débuté en js je suis carrément perdu dans le script. J'ai éssayé de la modifié mais sans succès.

Voici le code

var clear="../img/clear.gif"; //path to clear.gif

document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>');
var ct=document.getElementById("ct");
ct.onreadystatechange=function(){pngfix()};
pngfix=function(){var els=document.getElementsByTagName('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;

while(i-->0)
{
	if(els[i].className.match(/unitPng/))
	{
		uels[c]=els[i];c++;
	}
}

if(uels.length==0)pfx(els);

else pfx(uels);
function pfx(els)
{
	i=els.length;
	
	while(i-->0)
	{
		var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;
		
		if(el.src&&el.src.match(ip)&&!es.filter)
		{
			es.height=el.height;es.width=el.width;
			es.filter=al+el.src+"',sizingMethod='crop')";
			el.src=clear;
		}
		
		else
		{
			if(elb.match(ip))
			{
				var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";
				es.height=el.clientHeight+'px';es.backgroundImage='none';
				if(j!=0)
				{
					if(elc.position!="absolute")es.position='static';
					while(j-->0)
					if(!elkids[j].style.position)elkids[j].style.position="relative";
				}
			}
		}
	}
};};

Arf lol...

Non mais t'as vu le code quoi ?

C'est vrai qu'il n'est pas très aéré, mais concrètement, tu as vu les codes de M@teo21 sur le chapitre MySQL ?

Citation : Golmote

Arf lol...

Non mais t'as vu le code quoi ?

Et encore lorsque j'ai récupérer le code il y avait aucune indentation. Tout était à la suite.
J'ai essayé de l'endenté le plus possible celons mes connaissances en js. Désolé si ce n'est pas très lisible.

J'ai ça au fond d'un placard (Le code n'est pas de moi et je ne sais plus comment il marche, flemme de regarder)

/* ############## Configuration ############## */

// Chemin complet sans le nom de domaine de la page HTML vers les images appelées en CSS
var ImgsPath = "Images/";

// Gestion des exceptions
var Exceptions = new Array();

sizingMethod = 'scale';
/* ############## Fin de Configuration ############## */

// Execution au chargement de la page
window.onload = function() {
	PngFixImg();
	PngFixBkground();
} 

// Mise en transparence des <img /> PNG
function PngFixImg() {
	var arVersion = navigator.appVersion.split("MSIE")
	var version = parseFloat(arVersion[1])
	
	if ((version >= 5.5) && (document.body.filters)) 
	{
	   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 
			 if (img.align == "left") imgStyle = "float:left;" + imgStyle
			 if (img.align == "right") imgStyle = "float:right;" + imgStyle
			 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
			 var strNewHTML = "<span " + imgID + imgClass + imgTitle
			 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
			 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
			 img.outerHTML = strNewHTML
			 i = i-1
		  }
		  //if
	   }//for
	}//if
}//function

function PngFixImgPr(id) {
	var arVersion = navigator.appVersion.split("MSIE")
	var version = parseFloat(arVersion[1])
	
	if ((version >= 5.5) && (document.body.filters)) 
	{
	   
	  var img = $(id);
	  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 ;
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle;
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle;
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
		 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" ;
		 img.outerHTML = strNewHTML;
	  }
	}//if
}//function



// Mise en transparence des images PNG en background CSS
function PngFixBkground() {
	
	// Tableau des feuilles de styles
	var StyleSheets = document.styleSheets;
	
	// Boucle sur les feuilles de styles
	for(i=0; i<StyleSheets.length; i++)
		{
		// Si il s'agit d'Internet Explorer
		if(StyleSheets[i].rules)
			{
			Rules = StyleSheets[i].rules;
			
			// Boucle sur les règles de la feuille de style
			for(j=0; j<Rules.length; j++)
				{
				// Si la règle contient une propriété "background"
				if(
				   (Rules[j].style.background) ||
				   (Rules[j].style.backgroundImage) ||
				   (Rules[j].style.backgroundRepeat)
				  )
					{
					// Récupération des règles
					if(Rules[j].style.background)
						{
						BkgroundImg = Rules[j].style.background.match('[a-z0-9_-]*\.png');
						BkgroundRepeat = Rules[j].style.background.match('repeat|repeat\-x|repeat\-y|no\-repeat');
						}
					else
						{
						BkgroundImg = Rules[j].style.backgroundImage.match('[a-z0-9_-]*\.png');
						BkgroundRepeat = Rules[j].style.backgroundRepeat;
						}
					// Prise en compte des exceptions
					var regex = new RegExp(BkgroundImg, 'g');
					var yatil = regex.test(Exceptions);
					
					// Si l'image de fond est un PNG
					if(
					   	(BkgroundImg != null) &&
						(yatil == false)
					  )
						{
						// Détermination du sizingMethod suivant la méthode de repétition de l'image
						if(BkgroundRepeat != null)
							{
							// Cas "Etirer"
							if(
								(BkgroundRepeat == "repeat") 	||
								(BkgroundRepeat == "repeat-x") 	||
								(BkgroundRepeat == "repeat-y")
							  )
								{sizingMethod = 'scale';}
							// Cas "Rogner"
							else
								{sizingMethod = 'crop';}							
							}
						
						// Retrait de l'image de fond
						Rules[j].style.backgroundImage = "none";
						
						// Application du filtre
						Rules[j].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + ImgsPath + BkgroundImg + "', sizingMethod='" + sizingMethod + "')";
						
						} // if
						
					} // if
					
				} // for
				
			} // if
			
		} // for
		
}

tu utilise jquery ou pas ?

Tiller ton script fonctionne super ... mais me génère d'autre bug.
- Tous les liens de la sont désactivé (Impossible de cliquer dessus)
- La largeur et auteur de certain div à réduit.

C'est normal le script est vieux et moche.

Demandes gentiment à Golmote de te le réécrire comme cadeau de nowel =D

Citation : matheod

tu utilise jquery ou pas ?

Citation : Tiller

C'est normal le script est vieux et moche.
Demandes gentiment à Golmote de te le réécrire comme cadeau de nowel =D

Sa serait gonflé de ma part... en plus j'aimerais comprendre comment le script fonctionne.
Pour l'instant j'essaye de faire un mixe entre les 2 script, mais sans succès.

J'ai l'impression que tout se joue sur cette partie de code. mais j'ai du mal à la comprendre :
Quelqu'un pourrait t-il me l'expliqué ?

if(elc.position!="absolute")es.position='static';
while(j-->0)
if(!elkids[j].style.position)elkids[j].style.position="relative";

Citation : matheod

tu utilise jquery ou pas ?

NAN jconnais pas du tout cette technologie

A voir :
http://www.lafermeduweb.net/billet/que [...] e5-5-131.html

Citation : Tiller

Demandes gentiment à Golmote de te le réécrire comme cadeau de nowel =D

Euh... Ouais mais non... C'est noël pour moi aussi quoi, merde... xD

Mais cherche sur Google, doit y'en avoir par milliers des scripts dits "fix png transparency ie6" ou simplement "ie6 css fix script" ...

Dans le lien de Metheod il y a un script pas mal en fin d'article

Un des meilleurs script que j'ai pu essayer pour ma part est celui de Dean Edwards qui rectifie un grand nombre de problèmes sous IE6 et IE7 : http://code.google.com/p/ie7-js

Ah bien joué Nes', j'ai commencé à chercher celui-là ce matin sans réussir à mettre la main dessus

J'ai eu un peu de mal à le retrouver moi aussi .

Merci de tout les scripts que vous me proposé, mais j'en avais déja trouvé pas mal. Le problème c'est qu'ils engendrent des bug sur l'ensemble du site.
Le meilleure que j'ai trouvé est celui de mon premier post que j'ai trouvé sur ce site : http://labs.unitinteractive.com/unitpngfix.php

Après de longue heure d'analyse du scrit. Il me semble que c'est cette partie du code qui me pose problème, et qui fait disparaitre tout le contenue qui est en position absolute.

if(elc.position!="absolute")es.position='static';
while(j-->0)
if(!elkids[j].style.position)elkids[j].style.position="relative";

J'ai essayé d'enlevé se morceau de code ou de le modifié, mais bien évidemment le script ne fonctionne plus.
Quelqu'un pourrait m'expliquer se morceau de code ?

bah esseye quand meme ceux qu'on ta donné

T'as lu l'article de Matheod au moins Pegase ?

ouf tu as bien orthographié mon pseudo ce coup ci

Citation : matheod

bah esseye quand meme ceux qu'on ta donné

B1 sa je l'ais fais...

Citation

T'as lu l'article de Matheod au moins Pegase ?

B1 oui quand même. (Je ne crée pas un topic pour ne pas regarder les réponse proposé)

T'as essayé celui là : http://dillerdesign.com/experiment/DD_belatedPNG/ ?

Citation : Tiller

T'as essayé celui là : http://dillerdesign.com/experiment/DD_belatedPNG/ ?

Oui je l'ai essayé. mais pas réussi à le faire marché. Avec se script rien ne se passe. En plus la doc est très technique et en anglais. Donc pour l'instant le meilleure script que j'ai trouvé est toujours celui ci : http://labs.unitinteractive.com/unitpngfix.php

Mais toujours problème du contenu en position absolu qui disparait à cause de se code :

if(elc.position!="absolute")es.position='static';
while(j-->0)
if(!elkids[j].style.position)elkids[j].style.position="relative";

heu compliqué a mettre en place oO

Heu il donne même un code tout pret donc bon