SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 277 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Traitement d’images > Filtre PNG transparent pour images de fond dans IE

Filtre PNG transparent pour images de fond dans IE

27 octobre 2006 – 10 commentaires

3 votes

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Filtre pour gérer la transparence des images de fond au format png dans Internet Exploser

LE PROBLEME

« Lorsque vous affichez une page Web qui contient une image au format PNG (Portable Network Graphics) comprenant un arrière-plan transparent, l’arrière-plan de l’image peut s’afficher en gris au lieu d’être transparent. »
http://support.microsoft.com/kb/294714/fr

Pour les images png24 qui possèdent une partie transparente, cette partie sera grisée au lieu d’être transparente dans Internet explorer 6.0, ce qui peut gâcher un graphisme. Si Spip intègre un script (win_png.htc) qui règle le problème pour les images intégrées en html (à partir des articles, par exemple), ce scrip ne fonctionne pas pour les images de fond intégrée dans du CSS.

Le filtre ci-dessous utilise le filtre AlphaImageLoader de la MSDN (Microsoft Developer Network) library pour corriger (en partie [1]) ce problème d’image de fond lorsqu’on navigue sous Internet Explorer.

UN EXEMPLE

Voici un lien vers un exemple. Dans le pied de page de ce site, 1 images png24 avec une partie transparente dans le bas de l’image. L’image est représentée 2 fois. Celle du dessus est implémentée sans le filtre et le partie basse transparente de l’image est grisée. Celle du dessous est implémentée avec le filtre et le partie basse de l’image a retrouvé sa transparence.
Attention, pour voir la différence entre les deux images, vous devez utiliser (pour une fois, j’espère ! ;-) Internet Explorer 6.0.
Pied de page de demo.banlieues.be

USAGE

par exemple :
<div §§[sizingMethod]|image.png§§>texte ou non</div>
où sizingMethod peut être
-  crop : Coupe l’image pour adapter les dimensions de l’objet.
-  image (défaut) : Agrandit ou réduit les limites de l’objet pour l’adapter aux dimensions de l’image.
-  scale : Agrandi ou rétrécit l’image pour remplir l’objet.

Limites :
-  Les attribut css de l’image de fond, tel que background-repeat etc. ne fonctionnent pas et les ancres au dessus des parties non transparentes de l’image non plus (sous ie seulement, of course) ;-(

INSTALL :

-  Le filtre suivant doit être recopié dans mes_fonctions.php.

// **** Transparence PNG Sous I.E. ****
// This filter is adapted from http://forum.alsacreations.com/topic-20-14040-1-Astuce-Transparence-PNG-Sous-IE-Nikel-chrome-avec-ce-script.html
// by FluidBlow by http://forum.alsacreations.com/profile-6498-FluidBlow.html
// Nom du Filtre : backgroundPng                                              
// Auteur: robert.sebille(at)cassiopea.org - oct. 2006
// Sous licence GNU/GPL http://www.gnu.org/copyleft/gpl.html
// sizingMethod=
// crop        Clips the image to fit the dimensions of the object.
// image        Default. Enlarges or reduces the border of the object to fit the dimensions of the image.
// scale        Stretches or shrinks the image to fill the borders of the object.
// usage: <div §§[sizingMethod]|image.png§§>texte ou non</div>

function backgroundPng($texte) {
        $texte_analyse = "";
        $texte_analyse = $texte;
        $png_cherche_array = array();
        $png_cherche_array = explode("§§", $texte_analyse);
        $png_trouve_array = array(); $val_array =array();
        foreach ($png_cherche_array as $val) {
                if (substr($val, -4) == ".png") {
                        $val_array = explode("|", $val);
                       
                        if(preg_match("@MSIE ([0-9].[0-9]{1,2})@", $_SERVER['HTTP_USER_AGENT'], $resultats))
                                {$png_trouve_array[] = 'background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod='.$val_array[0].' src=\''.$val_array[1].'\')}';}
                        else       
                                {$png_trouve_array[] = 'background-image:url(\''.$val_array[1].'\')';}
                        } // if (substr($val, -4) == ".png")
                               
                else {
                        $png_trouve_array[] = $val;
                } // if (substr($val, -4) == ".png")
               
               
        } // foreach ($png_cherche_array as $val)
        $texte_analyse = implode("", $png_trouve_array);
        return($texte_analyse);
}

-  Dans les squelettes, le filtre s’utilise normalement : par exemple [(#TEXTE|backgroundPng)] ou [(#TEXTE*|backgroundPng)], etc...

Get Firefox

Notes

[1les fonctions css attachées à l’image de fond, telles que background-repeat, etc. ne fonctionne plus sous IE

Dernière modification de cette page le 5 août 2009

Retour en haut de la page

Vos commentaires

  • Le 28 octobre 2006 à 01:04, par François Schreuer En réponse à : Filtre png transparent pour images de fond dans IE

    Pour résoudre le problème de la transparence des PNG sous MSIE, il existe une autre solution (beaucoup plus simple, me semble-t-il) qui est par exemple décrite ici.

    • Le 28 octobre 2006 à 07:16, par Robert Sebille En réponse à : Filtre png transparent pour images de fond dans IE

      Si tu lis bien l’article, tu verras qu’il ne s’agit pas d’une autre solution, mais d’une solution à un autre problème (« Spip intègre un script (win_png.htc) qui règle le problème pour les images intégrées en html (à partir des articles, par exemple), ce script ne fonctionne pas pour les images de fond intégrée dans du CSS »).

      La solution dont tu parles, déjà intégrée à spip (win_png.htc) gère la transprence du png24 dans le code HTML (<img src=...>), mais comme win_png.htc est un javascript, il ne fonctionne pas dans le code CSS pour les images de fond (background-url). C’est cet autre problème que résout le filtre proposé ci-dessus.

    • Le 28 décembre 2007 à 11:47, par valerian En réponse à : Filtre png transparent pour images de fond dans IE

      En parcourant le web je suis tombé sur cette solution :
      http://www.twinhelix.com/css/iepngfix/

      Elle permet l’utilisation de png transparents en background, en utilisant le meme système que win_png.htc, c’est à dire inclure dans le css behavior : url(iepngfix.htc) sur l’élément que l’on souhaite.

      C’est la plus simple solution que j’ai trouvé pour ce problème.

    Répondre à ce message

  • Le 30 octobre 2006 à 16:05, par James En réponse à : Filtre png transparent pour images de fond dans IE

    C’est un filtre, donc le résultat est dans le cache. Cette méthode s’appuie sur la reconnaissance du client navigateur, il y a donc un hic : si le visiteur qui visite la page utilise un mac, linux ou firefox génère le cache, le visiteur suivant, même avec MSIE, ne bénéficiera pas de l’effet du filtre, puisque la page ne sera pas recalculé, l’effet sera donc aléatoire.

    Il est demandé aux rédacteurs d’utiliser du code html et un raccourci supplémentaire à la place des raccourcis classiques de gestion de documents associés, autrement dit, les rédacteurs pouvant exploiter cette fonctionnalité devront prédisposer de compétences informatiques importantes afin qu’il sache localiser l’image qui lui est nécessaire pour illustrer son article. Il s’agit bien de faire appliquer la transparence à une image.

    Il existe une classe dans les feuilles de style par défaut de spip : dans spip_style.css, la classe .format_png, qui applique le fichier win_png.htc.

    Ne serait-il pas plus simple de faire appliquer cette classe automatiquement à tout document ou vignette png trouvé dans le #TEXTE, et ce quelquesoit le navigateur utiliser au moment de la génération du cache ? ou bien encore, en s’appuyant sur jQuery, faire un script au chargement de la page s’inspirant de celui-ci ?

    Concernant l’argument lié aux images appelées depuis un css, je peux me tromper, mais je crois qu’il n’y a pas de solution... sinon d’obliger les visiteur à changer de navigateur ou d’utiliser des gif ou des jpg dans ces cas-là :)

    • Le 30 octobre 2006 à 16:59, par James En réponse à : Psychologie d’escalier.

      Je viens de tester un truc rapidos en SPIP1.9.1 : On peut ajouter la class .format_png dans le modèle img.html, ligne 21 :

      [<a href="(#ENV{lien})"[ class="(#ENV{lien_class})"]>
      ]<img[ class="(#TYPE_DOCUMENT|=={PNG}|?{format_png})"] src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"]

      etc...

      En incluant une feuille de style msie.css qui définit la classe :

      .format_png { behavior: url(win_png.htc); }

      et en observant la remarque d’erational dans les commentaires de l’article sur paris-beyrouth si on attache de l’importance à la validation w3c :

      [(#REM) Feuille de style qui corrige les defauts pour les utilisateurs de MSIE]
      <!--[if lte IE 6]>
      <link rel="stylesheet" href="[(#CHEMIN{msie.css})]" type="text/css" media="screen" />
      <![endif]-->
    • Le 30 octobre 2006 à 17:03, par Robert Sebille En réponse à : Filtre png transparent pour images de fond dans IE

      Il est vrai que j’ai écrit ce ce filtre en pensant plus au webmaster qui crée ou bidouille son squelette qu’au rédacteur. En effet, les images de fond, ne sont en général pas des images qu’on change souvent, mais dont on se sert pour bâtir le graphisme de son site, css oblige.

      Maintenant, en ce qui concerne le cache, s’il s’agit de celui du navigateur, il est propre à chaque navigateur, et donc ne posera pas de problème.

      S’il s’agit du cache de spip, j’avoue que je ne sais pas si spip met en cache les filtres de mes_fonctions.php3 ou s’il les recalcule, mais voici ce que peut faire simplement un webmaster qui veut une image de fond png24 avec de la transparence (essaye de convaincre un graphiste professionel d’utiliser un gif à la place, et tu comprendras ;) pour contourner l’éventuel problème : il peut très bien inclure dans n’importe lequel de ses squelletes, un squelette indépendant, léger, avec le filtre, et de mettre le cache de ce squelette à 0. (C’est ce qu’il y a dans l’exemple, un court squelette pied.php3, avec son cache à 0).

      Pour le reste, j’ai déjà expliqué plus haut que win_png.htc étant du javascript ne fonctionnait pas avec le css. Et obliger les visiteurs à changer de navigateur, c’est encore plus difficile qu’avec le graphiste professionnel et les gif ... ;)

    • Le 30 octobre 2006 à 21:10, par James En réponse à : Filtre png transparent pour images de fond dans IE

      Je parle bien du cache de SPIP, et je confirme, ce filtre mettra en cache pour tous les visiteurs, le résultat d’un test qui ne les concernera peut-être pas et ceci pour la durée du vie du cache, et pas pour chaque visiteur.

      Et je crois que je viens de comprendre à quoi ce filtre est destiné : détourner des articles pour réaliser une partie de l’habillage du site parce que « les professionels refusent de produire des gifs »... au détriment des performances si nécessaire en mettant un cache à 0... ça fait cher du compromis je trouve ;)

      Donne-moi tes images, je vais te les transformer en gif gratuitement :)

      Plus sérieusement, je trouve que l’objectif n’apparaît pas de manière claire dans cet article et que ce n’est pas à mettre dans les mains d’un débutant.

    • Le 30 octobre 2006 à 22:35, par Robert Sebille En réponse à : Filtre png transparent pour images de fond dans IE

      les professionels ne refusent pas de produire des gif, mais le format gif offre seulement 256 couleurs contre plusieurs millions pour le png 24 bits, et apparement, c’est important pour eux. (Et ce filtre vient d’ailleurs d’une demande professionnelle).

      J’ai vérifié, le cache de spip met en cache le filtre, et le calul du filtre est perdu. ALors, le cache à 0, est ce cher le compromis ? Oui, si on réserve cela à l’article « en général ». Mais mon idée de départ ici, n’était pas de donner à des rédacteurs la possibilité de mettre des png 24 bit en image de fond dans leurs articles, mais de permettre à un créateur de sites d’en mettre dans son graphisme en général et de manipuler cela à partir de l’espace privé, sans dépendre du squelette. Dans la demo proposée, le filtre est dans un squelette qui fait 0.8Ko (pied de page dans un article), ça ne va pas côuter très cher. Ce filtre est donc finalement à réserver à des articles particuliers (on peut faire des tas de choses avec un article spip, par exemple un pied ou un en-tête de page) ou des rubriques particulières (calendrier, par exemple), ou encore des brèves... On peut aussi imaginer un squelette article particulier très léger qui servirait, avec du css, à inclure une image de fond png24 dans les articles en général (et ceci toujours à « peu de frais »)

      Enfin, tu n’es pas obligé d’utiliser ce filtre ;)

    • Le 1er novembre 2006 à 14:48, par workaholiks En réponse à : Filtre png transparent pour images de fond dans IE

      une piste qui résoud le probleme de msie et des PNG
      http://dean.edwards.name/IE7/
      Malheureusement il faut un peu bidouiller en ce qui concerne les :hover sur un fond PNG transparent.

    Répondre à ce message

  • Le 28 octobre 2006 à 07:46, par Robert Sebille En réponse à : [sizingMethod] doit être remplacé par sa valeur SANS les crochets

    Petite question qui m’a été posée : Lorsque vous utilisez le filtre dans un article, <div §§[sizingMethod]|image.png§§>texte ou non</div>, [sizingMethod] doit être remplacé par sa valeur (crop, image ou scale) SANS les crochets, par exemple : <div §§scale|image.png§§>texte ou non</div> pour agrandir ou rétrécir l’image pour remplir l’objet (c-à-d, le conteneur div), et non <div §§[scale]|image.png§§>texte ou non</div>.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Metas +

    3 décembre – 10 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Newsletters

    16 janvier 2013 – 378 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

Ça spipe par là