[Trucs & Astuces][Résolu]Transparence des PNG sous IE

globy a écrit :
@Trunks : tu as essayé en mettant ta propriété de background directement dans le style de ta div ?

Trunks_ a écrit :
Effectivement je suis c**. Ce n'est pas parce-que dreamweaver ne reconnait pas l'attribut behaviour que ça ne marche pas, et de plus quand j'ai eu ce script je ne connaissais pas bien le CSS.
Bon, ça y est je l'ai incorporé dans le CSS et ça marche. A dire que j'étais si près du but ...

Bonjour à tous! Voilà quelques nuits que je me m'arrache les os de la tête (oui ça fait mal) et que j'essaie de résoudre des problèmes liés au magnifique navigateur Internet Explorer... (comme c'est étrange!) Et voilà que je tombe sur ce sujet très très intéressant...

Je ne connaissais pas cet attribut behaviour et encore moins le fonctionnement de ce fichier .htc (c'est du chinois pour moi) Vous dites qu'il est possible de mettre
"la propriété de background directement dans le style de la div"...

Si mon image est en background, que donne le code?
J'ai essayé:

.ma_div 
{
behavior: url('script/pngbehavior.htc');
background: url("mon_image.png") no-repeat;
} 

Suis-je sur la bonne voie? merci à vous.

J'ai aussi une chose très très bizarre...

Sur internet explorer Macintosh (5.2), cela gère apparemment les PNG24 en ayant une div avec un background du genre:

.div1 {
padding: 0px 0px 0px 10px;
font-family: Arial, Verdana, Helvetica, Sans-Serif; color: white; font-weight: 
background: url("images/cadre_fonce.png") no-repeat;
}		

Mais il suffit que je veuille répéter l'image pour que mon image soit opaque ou ne s'affiche pas... Avec ce code par exemple:

.div2 {
background: url("images/cadre_fonce.png") repeat;
}	

Sur Safari et Modzilla, cela fonctionne pourtant!
Est-ce un problème connu ou est-ce moi qui fait une erreur?

En fait, après avoir bucher plusieurs jours dessus, j'ai finis par trouver la solution.
La technique du behaviour ne marche que pour les balises <img> mais pas pour les background. Si tu veux faire fonctionner la transparence d'un background PNG sous IE, tu dois passer par ceci :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/YourImage.png,
sizingMethod='scale');

Mais là ça se complique, c'est la raison pour laquelle j'ai galéré avec cette technique. Pour que celà fonctionne, tu dois utiliser un commentaire conditionnel pour inclure un fichier CSS spécifique à IE. Ca ressemble à ça :

<!–-[if IE]>
	<link rel="stylesheet" type="text/css" href="script/ie_style.css" />
<! endif -–>

Ainsi, dans le CSS spécifique à IE, tu places le code que j'ai mis au-dessus pour la balise en question. Ne mets pas une seconde fois l'image en background, sinon la transparence ne marchera pas (que ça soit dans le CSS non IE ou dans le CSS pour IE).

Note importante :
J'ai remarqué que la fonction AlphaImageLoader() empêchait qu'on fasse des liens dessus, enfin à voir. Pour ma part, j'avais un menu et du coup les boutons du menus ne marchaient plus, j'ai donc abandonné la transparence pour ce cas là.

Voilà une piste qui pourra t'aider j'espère.

On peut régler l'histoire des liens à grand coup de CSS, j'ai un div avec un fond en alphaimageloader et je m'en suis sortie en forçant un cursor:pointer., enfin ça dépendra du cas.

C'est bon à savoir, merci

Trunks_ a écrit :
Ne mets pas une seconde fois l'image en background, sinon la transparence ne marchera pas (que ça soit dans le CSS non IE ou dans le CSS pour IE)

Merci beaucoup pour ta réponse.

Donc si je comprends on ne peux pas faire une transparence répétée, avec l'attribut:
background-repetition: repeat; ?

Pire encore, moi, je souhaitais faire cela dans un menu (et celui-ci s'adapte en fonction de la taille des caractères, si l'utilisateur les change)

Je crois que je n'ai plus qu'une solution: C'est de faire du gif tramé lorsque je suis sur IE (un carré sur 2 transparent) proposé dans cette méthode: http://batraciens.net/css-astuces/transparence-2.htm et voir ce que ça donne...

Si ça donne rien, je renonce à la transparence uniquement pour IE en utilisant le filtre * html
Modifié par toluol (28 Dec 2005 - 21:42)

Je me suis cassé la tête aussi pour empiler un background transparent sur un autre. Finalement, j'ai trouvé le même pis-aller que précedemment qui me satisfait assez sur mon site www.imaginascience.com (voir les titres H1) : je met un pixel sur deux transparent. Cela m'a demandé un peu de temps à le faire.

Dans le cadre de ce que je voulais faire, cela passe assez bien je trouve et je n'ai pas besoin de prog tarabiscotée.
Modifié par NEWTOON (31 Mar 2006 - 17:18)

Trunks_ a écrit :

J'ai remarqué que la fonction AlphaImageLoader() empêchait qu'on fasse des liens dessus, enfin à voir. Pour ma part, j'avais un menu et du coup les boutons du menus ne marchaient plus, j'ai donc abandonné la transparence pour ce cas là.

Les liens avec une image de fond transparente unie peuvent fonctionner, mais pas avec toutes les tailles d'images. (je sais c'est idiot, mais c'est le cas). Si mes souvenirs sont bons, avec une image transparente de 2x10 pixels ça fonctionne. Si je retrouve ma source, je la posterai.

Edit: Décorticage du bug des liens sur fond transparent (en anglais)
Modifié par Lanza (31 Mar 2006 - 21:10)

Bonjour à tous !

Je viens de tomber sur ce tuto et je m'aperçois alors que je n'ai rien compris mis à part que pour utiliser des images png en "background" (par exemple dans un tableau), il faut utiliser ce code :

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
    <tr>
        <td width="100%" height="37" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images_png/1.png,sizingMethod='scale');"></td>
    </tr>
</table>

Mais le problème est que sous Firefox, les "background" ne sont plus affichées car il ne connait pas le code ci-dessus, et le problème sous Internet Explorer, les "img" sont affichées façon png ie, c'est à dire qu'il y a ce ******* de cache gris .

Je voudrais donc savoir, s'il était possible de faire un script qui se place dans le header et qui affiche toutes les images au véritable format png sous n'importe quel naviguateur...

Et pour finir, (hé oui, je suis un boulet )
Je n'ai pas compris le role de la propriété hasLayout ni comment s'en servir ...

N'importe quel sources, codes, aides, pistes, liens serront les bienvenus !

Merci à tous et à toutes !
Bonne Soirée,
FluidBlow.
Modifié par FluidBlow (08 May 2006 - 19:36)

En fait, je vien de retester ce code, le faire tourner dans bien plus d'angle que vous n'imaginiez, et je le maintient :

.element {
    /* Mozilla ignore le code que Microsoft a mis en place sur son navigateur */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images_png/1.png');
			}
 
/* IE ignore les définitions de style avec [attributs], il ignorera ce qui va suivre */
.element[class] {
    background-image:url('images_png/1.png');
}

L'inconvenient de ce code, c'est que pour l'utiliser dans des tableaux, on est obligés de créer une nouvelle classe pour chaque "<td>" ce qui prend énormément de temps et qui prend des bons paquets d'octets aussi...

La solution serait de créer un script du genre "PNGbehavior" mais qui fonctionne pour les "<img" et pour les "background".

Je ne m'y connait pas encore assez pour réaliser un script comme celui-ci mais si quelqu'un veut ce lancer (il donnerait la solution à des milliers d'utilisateur qui aiment le PNG !!) :

Le script aurrait les caractéristiques suivantes :
- Doit fonctionner sur une page externe à inclure dans la page html ou php
- Il doit donner un équivalent "<img src='1.png'...>" par un code de n'importe quel nature mais qui incluera par n'importe quel moyen la correction de l'affichage PNG
- Il doit donner un équivalent de "<td background='1.png'..." du genre "<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=1.png,sizingMethod='scale');"..."
- Il doit être compatible sur tous les naviguateurs

Et c'est tout !!
Alors ne me dites pas que sur tous ces super-programmeur javascript/css il n'y en a pas un qui pourrait faire un script simple comme celui-ci.

Vous pouvez vous aidez du script "PNGbehavior" que voici :

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

</script>
</public:component>

J'avais moi même tenter (et oui j'avais beaucoup d'espoir ) de le modifier, en doublant le script, et en remplaçant les variables "realSrc" et "src" par "realBackground" et "background"...

Sous ie, le code fonctionnait à moitié, mais je pense qu'il y avait peut-être de l'idée dans mon script.

Inspire !


Merci à tous et à toutes!
Bonne Soirée,
FluidBlow.

Bonjour à tout le monde !

Je vien de faire finalement mon script en PHP pour afficher correctement les images PNG en background pour tous les naviguateurs.

Ce code est à insérer dans le header

<?php
	function backgroundPng($nombre){
 		if(preg_match("@MSIE ([0-9].[0-9]{1,2})@", $_SERVER['HTTP_USER_AGENT'], $resultats))
                                  echo('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale src=\'url/' . $nombre .'.png\')};');
		else	
                       echo('background-image:url(\'url/' . $nombre . '.png\');');
	}
?>

Noubliez pas de remplacez "url" par le dossier (Ou par un blanc si c'est dans le meme répertoire que ce code).

Une fois ce code inséré dans le header, il vous suffit de faire votre emplacement pour l'image background (sans la mettre) et d'y préciser un petit code : style="<? backgroundPng(name); ?>" en remplacant "name" par le nom et le dossier de votre images.

ATTENTION : Si l'url de votre image est "images_png/1.png" (= le nom de l'image est un numéro) alors le code à inserer sera style="<? backgroundPng(1); ?>" et il faudra remplacer dans le script du header, "url" par "images_png/".
En recvenche, si l'url de votre image est "images_png/image1.png" (= le nom de l'image est un mot) alors le code à insérer sera style="<? backgroundPng('image1'); ?>" il y aurra donc les signes ' à rajouter si le nom de l'images contient autre chose que des chiffres.

Exemple d'utilisation pratique du script :

<?php
	function backgroundPng($nombre){
 		if(preg_match("@MSIE ([0-9].[0-9]{1,2})@", $_SERVER['HTTP_USER_AGENT'], $resultats))
                                  echo('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale src=\'png/' . $nombre .'.png\')};');
		else	
                       echo('background-image:url(\'png/' . $nombre . '.png\');');
	}
?>
</head>
<body>
<......>
<td width="100%" height="37" style="<? backgroundPng(1); ?>">texte ou non</td>

L'url de l'image affichée en background sera donc : "png/1.png"


Des questions ?


A+
FluidBlow
Modifié par FluidBlow (09 May 2006 - 17:28)

Bonjour,

Merci FluidBlow pour ta contribution !
Ma question : comment fait-on pour profiter du correctif quand le style n'est pas en dur dans le fichier XHTML (comme dans ton exemple) mais dans une feuille de style annexe ?

Mercil fluid blow, tu as testé sur tous les nav t?

Car ça m'intéresse
mais ton <td> dans ton script me fait un peu peur pour le reste

salut

ouahou code intéressant en effet, par contre comme dit plus haut, comment fait on si on a une feuille de style a côté? (voir plusieurs)

je vais finalement utiliser quelque chose de plus simple et qui fonctionne, voici le code d'exemple d'affichage d'une bannière avec des ombres :

#top{
/*background:url(img/top.png) no-repeat;*/
height:120px;
width:90Opx;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/top.png');
  background: url(img/top.png) no-repeat !important;
  background: none;
}

edit: je n'avais pas fait attention, mais dans IE 7 ça ddouble mon image, et ça ne fonctionne pas pour les background repeat :'(, existe-t'il une solution pour les background repeat?
Modifié par r4z (03 Jul 2007 - 11:10)