ChezSimay

Certains d'entre vous (voir beaucoup) ont déjà utilisé des images au format PNG pour pouvoir bénéficier de la qualité et surtout de la transparence alpha de ce format d'images. Malheureusement ce format d'images est mal interprété par IE6, c'est à dire que sera l'image sera bien affichée, mais les endroits ou se trouvent la transparence ne seront pas transparents, heureusement, pour nous les intégrateurs, il existe la possibilité d'ajouter un petit script qui permet de faire en sorte que les images s'affichent bien sur Internet Explorer, attention ce script en fonctionne que pour les images insérées dans le flux HTML, pour les images insérées en CSS, allez faire un petit tour du coté de chez alsacréations.

Si on regarde de plus prêt le javascript utilisé pour faire en sorte que les images PNG insérées dans le flux s'affichent bien, cela ne fonctionne que pour les images insérées via le tag <img ... src="" ... />, Malheureusement, dans un projet récent j'ai du utiliser des images en PNG d'une autre façon, en les insérant comme des boutons de formulaires via le tag <input type="image" src="" ... />, et de cette façon le script que j'utilisai jusqu'à présent, je l'ai donc modifié en conséquence et je me dit que cela pourrait bien en intéresser certains :

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
		}
	}
	var formulaires = document.getElementsByTagName('form');
	for(var j=0; j<formulaires.length; j++){	
		for(var i=0; i<formulaires[j].getElementsByTagName('input').length; i++){
			var bouton = formulaires[j].getElementsByTagName('input')[i];
			if(bouton.src){
				var boutonName = bouton.src.toUpperCase();
				if (boutonName.substring(boutonName.length-3, boutonName.length) == "PNG") {
					var boutonID = (bouton.id) ? "id='" + bouton.id + "'" : "''";
					var boutonTitle = (bouton.title) ? "title='" + bouton.title + "' " : "title='" + bouton.alt + "' ";
					var boutonStyle = "" + bouton.style.cssText ;
					if(bouton.className){
						var boutonClass = "class='" + bouton.className + "' input_image";
					}else{
						var boutonClass = "' input_image'";
					}
					if (bouton.align == "left") boutonStyle = "float:left;" + boutonStyle;
					if (bouton.align == "right") boutonStyle = "float:right;" + boutonStyle;   
					if (bouton.parentElement.href) boutonStyle = "cursor:hand;" + boutonStyle;
					var strNewHTML = "<a href=\"#\" " + boutonClass + boutonID + boutonTitle + " style=\"" + "width:" + bouton.width + "px; height:" + bouton.height + "px;" + boutonStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + bouton.src + "\', sizingMethod='scale');\" onclick=\"envoyerForm("+j+");\" >&nbsp;</a>" ;
					bouton.outerHTML = strNewHTML;
					i = i-1;
				}
			}
		}
	 }
}

function envoyerForm(num){
	document.forms[num].submit();
}

Évidement, il y a certaines restrictions, il faut que les boutons se trouvent entre des balises form, et que le formulaire ai un fonctionnement normal, en gros ça veut dire que je ne sais pas trop comment ça se passe si le formulaire est envoyé via AJAX mais bon je pense qu'un test sur l'argument onclick du bouton et si il est présent je le reprend sinon j'envoie le formulaire normalement (si une âme charitable passe par la...)