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...)

Dans cet article, nous allons voir comment réaliser des ombres entières réalisés en CSS. D'habitude la gestion de zone avec des ombres en CSS se réalisent avec des images de fond, ce qui implique forcement que la taille de la zone qui possède l'ombre est fixe (au moins sur un axe), et que chacune des zones du site qui possèdent une ombre et qui ont des tailles différentes ont des images de fond différentes.

Dans mon cas, il suffit d'avoir dans un calque positionné, deux calques, un pour le contenu et une autre pour l'ombre et le tour est joué. Voici le code HTML, on pourra remarque qu'il n'y a pas grand chose de compliqué...

<div id="conteneur">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<div class="ombre">&nbsp;</div>
</div>

Et la feuille de style associée, ici il faut donc faire attention à ce que le calque conteneur ai un attribut de position (position:relatif; ou position:absolute;) afin que le calque qui possède l'ombrage soit étiré sous le contenu avec un positionnement en absolute en left, top, bottom et right. Attention, étant donné que l'ombrage est positionné de façon absolute et après le contenu de mon cadre, il faudra donner au contenu un positionnement relatif pour pouvoir lui associer un niveau d'ordre de calque (z-index). Ensuite, il faut juste appliquer des propriétés pour gérée une opacité réduite pour cet ombrage et le tour est joué.

#conteneur{
	background:#fff;
	width:350px;
	position:relative;
	border:1px soldi #555;
	margin:30px;
}
#conteneur p{
	padding:10px;
	margin:0;
	color:#555;
	background:#fff;
	position: relative;
	z-index:1;
}
.ombre{
	position: absolute;
	bottom:-5px;
	right:-5px;
	top:-5px;
	left:-5px;
	background:#000;
	filter : alpha(opacity=20);
	-moz-opacity : 0.2;
	opacity : 0.2; 
}

• voir un exemple d'ombrage full CSS