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...
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |