Transparence PNG 24 sous IE grâce à javascript

je viens de tomber la dessus, je n'avait pas encore fais de test avec les transparences PNG 24 sous IE...

la solution présentée ici utilise un script JS externe inclut de manière conditionnelle..

Donc la feuille de style ne bouge pas, elle est valide, c'est propre et çà marche...

Testé sous IE 6PC, IE5,5 mac (qui de toute façon se débrouille bien avec le PNG 24) Firefox PC/Mac , Opéra 8,2 Mac.... enfin y'a pas de raison que çà pose de problèmes ailleurs...

Je ne connaissais pas cette solution...

Une solution avec Javascript va fonctionner seulement avec Javascript.
Il y a aussi une solution côté serveur.

Pour forcer le support des png dans IE, j'utilise le script de Justin Koivisto : KOIVI PNG Alpha IMG Tag Replacer for PHP.

Ç'est bon pour les images codées en dur, et les images dont le style est déclaré « inline », c'est-à-dire :

<div style="background-image: url(image.png)">

Parce qu'il ne faudra pas simplement attendre la sortie d'IE7, mais il faudra attendre que plus personne n'utilise les versions 5 et 6, ce qui peut nous mener loin...

Après avoir placé les composantes dans les bons répertoires (replacePngTags.php et spacer.png) il suffit de placer un petit bout de code en haut de page...

<?php ob_start(); ?>

... et un autre petit bout de code en bas de page...

<?php
    include_once 'replacePngTags.php';
    echo replacePngTags(ob_get_clean());
?>

Et le script fait le reste.

Je le note.

Malheureusement je code à 98% en ASP...

ernstein a écrit :
la solution présentée ici utilise un script JS externe inclut de manière conditionnelle..

Si tu accepte l'utilisation de javascript, alors autant utiliser cet IE7 là qui corrige la gestion de la transparence de IE et bien d'autres choses en plus.

Il y a un truc qui fonctionne très bien sans js et sans rien d'autre, juste une feuille de style importée grâce aux commentaires conditionnel.

Si vous voulez un exemple : http://www.cedrich.net

cad ? je ne te suis pas...

Comment gère tu l'affiche de PNG 24 dans IE ?

Il faut regarder la feuille de style que j'apelle via un commentaire conditionnel.

En gros c'est la propriété propriétaire ( ) "filter"

Bon,,,, ben chez moi çà ne fonctionne pas... c'est étonnant puisque le script fait la même choses que ton code....


maintenant je fais moi une chose étonnante (limite bricolage.)


j'ai une image affichée en background dans un div (jpg) et une autre dans le div via <img src .... qui elle est le fichier png qui est un masque avec tu texte en transparence.....

je cherche à donner la possibilité à un non initié de photoshop de rendre ces images propres avec des textes en incrustations alpha...

ex :

le texte est l'image sont deux fichiers...

c'est peut être pour çà que çà zouille...

Bonjour ernstein,

Tu peux lire ce billet d'Eric Meyer (en), je pense que ça se rapproche de ce que tu essais de faire : Clearly Impossible? (en)
Modifié par Stephan (24 Sep 2005 - 15:02)

Bien le bonjour Stephan...

En fait çà marche plutôt bien...

Je fais la chose suivante pour le moment :

<img src="masque.png" alt="" id="masque" />

ensuite en css

#masque {
	background-image:url(images/illustration.jpg);
	background-repeat:no-repeat;
}

le masque et l'image ayant la même taille çà fonctionne..

ensuite pour IE utiliser un CSS externe inclut sous forme de commentaire conditionnel..

le problème est que sans style l'image n'est pas vivisle...

à creuser..

merci pour le lien

çà fonctionne à une exéption près ....... IE PC

en fait quand j'utilise cette propriété sous IE

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

j'ai un décalage de quelques pixels à droite de mon bloc image..

je résume : j'ai un bloc image de 555px x 176px avec comme fond une illustration.. la balse image en elle même apelle je fichier PNG (masque.png)

ce bloc flotte à coté de mon menu (le menu est à sa gauche)

à partir du moment ou j'utilise la propriété filter mon menu se décale de quelques pixels à droite....

Dans le cadre du projet qui m'occupe, çà pose un problème...

et puis j'aime pas les trucs que je ne maîtrise pas

avez-vous rencontré ce problème ?

j'ai presque l'impression que çà se comporte comme la double marge sous IE
Modifié par ernstein (09 Nov 2005 - 10:37)

Stephan a écrit :
Pour forcer le support des png dans IE, j'utilise le script de Justin Koivisto : KOIVI PNG Alpha IMG Tag Replacer for PHP.
[...]
Et le script fait le reste.

Zut. Si la page appelante n'est pas au même niveau que le répertoire image, je pensais qu'il fallait déclarer :

<?php
	[b]$img_path = 'repertoire_relatif_des_images';[/b]
    include_once 'replacePngTags.php';
    echo replacePngTags(ob_get_clean());
?>

Et bien non
J'ai mal lu ?

@Cedric : ton exemple n'est plus en ligne...
Modifié par globy (20 Nov 2005 - 12:46)

Il le sera bientôt de nouveau, je peaufine une nouvelle version

globy a écrit :

Zut. Si la page appelante n'est pas au même niveau que le répertoire image, je pensais qu'il fallait déclarer :

<?php
[b]$img_path = 'repertoire_relatif_des_images';[/b]
include_once 'replacePngTags.php';
echo replacePngTags(ob_get_clean());
?>

Et bien non
J'ai mal lu ?

As-tu bien placé replacePngTags.php au même niveau que la page appelante ?

Chez moi j'ai :

replacePngTags.php dans le répertoire de la page appelante
spacer.gif dans le répertoire /images/

Et comme je l'ai dit plus haut :

<?php ob_start(); ?>

Tout en haut de la page et :

<?php
    include_once 'replacePngTags.php';
    echo replacePngTags(ob_get_clean());
?>

en bas complètement.

Et ça baigne
Modifié par Stephan (20 Nov 2005 - 21:47)

Salut Stephan,

Ben je crois avoir fait comme toi :
Mon test.php

<?php ob_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<div>
	<h1>Fixed display of PNG Alpha Transparency</h1>
	<p><img src="images/test.png" alt="PNG-24 image with transparency" title="PNG-24 image with transparency" style="float: left; margin: 15px;" />
	</p>
</div>
</body>
</html>
<?php
	include_once 'replacePngTags.php';
	echo replacePngTags(ob_get_clean());
?>

Placé dans un répertoire au même niveau que replacePngTags.php et les deux png dans un sous répertoire "images" (spacer.png et test.png).

C'est un spacer.png, pas spacer.gif que j'ai dans l'archive originelle du script. Ça vient pas de là le problème ? Le test.png est également issu de l'archive.

En définitive, tout s'affiche bien sur FF pc mais pas sur IE 6 pc
Bien sûr je n'ai pas de problème de chemin si je mets tout le fatras dans le même répertoire. Mais j'organise un minimum mes fichiers... d'où ma question sur le $img_path du php.

Et je sais pas quoi en faire de cette variable, ça semble pas prendre et pourtant dans les commentaires du php ils en parlent comme d'un paramètre
Modifié par globy (21 Nov 2005 - 08:28)

globy a écrit :

C'est un spacer.png, pas spacer.gif que j'ai dans l'archive originelle du script. Ça vient pas de là le problème ? Le test.png est également issu de l'archive.

Oups Tu as raison. C'est un spacer.png

Je remonte un vieux sujet mais concernant le script je tient à souligner qu'avec l'utilisation de feuille CSS externe, le script ne peut rien faire (à moins qu'une option m'echappe)

Personnellement je sais qu'avec beaucoup de temp je pourrait modifier ça (en quelques mois, j'ai les idées mais pas le niveau).
La modification pourrait consister à parcourir les feuilles externe et ajouter grâce au PHP une feuille CSS interne à la page corrigeant les background-image.

Par ailleur si on utilise des formes courte du genre

background: url("images/head1.jpg") top center;

Le script là aussi ne prend pas en compte les données.

Je ne rencontre pas de problème avec les feuilles externes....

Par contre le fait de rendre dynamique une feuille de style en la générant par exemple en ASP et en retournant un content type de type text/css pose des soucis de performance... comme si elle n’était pas en cache...

La leçon de cette histoire à mon sens est de ne pas vouloir aller plus vite que les réalités... En ce sens qu'il est rare que l'usage de png 24 bits ne servent d'autres intérêts que celui du développeur...

l'utilisateur lui il s'en contre fou...

restons simple.

Bonjour a tous esque quelqu'un pourrait envoier KOIVI PNG Alpha IMG Tag Replacer for PHP. car le lien internet ne marche plus merci d'avance .

Quelle est votre méthode utilisée pour que la transparence des png s'applique sur les background d'une CSS externe ?
Visiblement, la méthode par Javascript dans le premier post d'ernstein ne passe pas.

En fait, je tente de faire un rollover CSS, avec des PNG transparent...
Modifié par Nigel (04 Jul 2006 - 12:48)