• Accueil
  • Services
  • Portfolio
  • Contact
  • Css
  • Ajax
  • Graphisme
  • Flash
  • PHP
  • Actualité Informatique

WebCssDesign

Web Css Design, CSS design, xHTML, HTML 5, ajax jQuery, SEO, tout pour la création et le référencement SEO de sites web

Images png sous Internet Explorer

  • Accueil
  • Ajax
  • Images png sous Internet Explorer
  • Tweet
  • Tweet

png et transparenceLe 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

A voir aussi

  • Carousel image 3D
  • Opera et standards du web
  • Ad Manager Google
  • Référencer du flash
  • carrousel 3d gratuit
  • jQuery Zoom et 50 exemples d’utilisations
  • jQuery plugins, 240 tutoriels à découvrir
  • Ajax jQuery, 10 tutoriels à voir
  • jQuery virtual tour gratuit
  • Coins arrondis avec jQuery CSS et une seule image
  • http://wiki.nano-framework.com Steph

    Il y a aussi l’excellent script de Dean Edwards : http://code.google.com/p/ie7-js/ qui en plus de gérer la transparence des png, améliore la compatibilité CSS de IE.

  • Admin

    Merci pour cette excellente remarque.

  • Mazzu

    Voici une autre référence intéressante : http://developers.slashdot.org/story/10/07/17/1645207/Adding-CSS3-Support-To-IE-6-7-and-8-With-CSS3-Pie

RSS Souscrire
  • Populaires
  • Derniers articles
  1. Icones gratuites : drapeaux du monde

    Il est toujours utile d'avoir des drapeaux de bonne qualit qu'ils...

  2. jQuery validation formulaire

    Voici un exemple concret de validation de formulaire ajax l'aide du...

  3. un autre diaporama flash gratuit

    Voici donc un autre diaporama flash gratuit avec des fonctionnalit s...

  1. Slidorion accordéon avec slider jquery

    slidorion

    Slidorion est un nouveau slider d image jQuery et oui...

  2. Animation pure CSS

    animation-css

    Voici un petit article sur des animations CSS plut t...

  3. diapo nouveau slideshow jquery avancé

    diapo-slider

    Voici Diapo un nouveau plugin jQuery gratuit permettant de...

  4. Chopslider 3 slideshow jquery complet

    chopslider

    Chop Slider vient d arriver Ceci est un plugin...

Newsletter

Loading... Loading ...

Pages

  • Contact
  • Portfolio

Catégories

  • Actualité Informatique
  • Ajax
  • Css
  • Flash
  • Graphisme
  • Outils Web
  • PHP

Tags

Agile Ajax animation Apple carousel carrousel Coda Css CSS3 design diaporama diaporama flash gratuit ecommerce firefox Flash galerie galerie flash Google gratuit gratuits icon icones icones gratuites images javascript jquery lightbox magento map modal box mootools pdf PDO photos PHP php5 plugin publicité référencement slider slideshow W3C web xml Yahoo

A découvrir

Réseau

  • Associations-Sportives.fr
  • Chambres-Guide.com
  • Le-Bio-Guide.com
  • Contact-Artisan.fr

Blogoliste

  • CssMania
  • Korben
  • SmashingMagazine
  • Teliad

Sites

  • Art Déco Design
  • Hotel de Paris Sète
  • Investi7
  • Artisans Guide

© 2008 - 2011 Web CSS Design