WebCssDesign

Le png, bien que plus performant que le gif, et est peu ou mal supporté par certains navigateurs dont celui de microsoft, Internet Explorer.

Il existe cependant une astuce permettant IE, à partir de la version 5.5, d’afficher correctement la transparence des png .

Il convient d’insérer dans les balises head de vote page html le code suivant:

<!–[if gte IE 5.5000]>

<script type= »text/javascript » src= »pngfix.js »></script>

<![endif]–>

Puis à la racine de votre serveur (ou ailleurs), mettez le fichier pngfix.js contenant le code javascript suivant:

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()

{

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
}

}

}
window.attachEvent(« onload », correctPNG);

Télécharger le fichier pngfix.js pngfix.js

Les png transparents devraient normalement s’afficher correctement sous IE. Pour plus de détails vous pouvez vous référer à la page suivante: http://homepage.ntlworld.com/bobosola/pngtestfixed_JS_inc_file.htm

Catégories: Ajax
Tags: Css, design, javascript