Ie et les transparences d'images

[Yeb215]

Salut à tous !

Je suis en train de passer en html les calques de photoshop, et je suis confronté à un dilemne :

- Utiliser le format Gif 256 couleurs pour rendre la transparence sans couches alpha, ce qui donne le resultat le plus misérable qu'il m'a été donné de voir, meme avec windows 3.1 c'était mieux...

- Utiliser le format PNG mais interdire de ce fait IE d'avoir un bon rendu graphique.

J'ai appliqué la methode consistant à utiliser un pixel vide et transparent avec ce type de code html :

<img src="pixelvide.gif" style="width:130px; height: 1px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ImagePNGavecTransparences.png', sizingMethod='scale');" /></td>

mais cela affiche une petite croix rouge d'image non trouvée, malgrès que le fond apparaissent bel et bien comme je veux.

Quelqu'un a-t-il une solution pour utiliser des bons PNG sous IE ?

Voilà la question du jour,

Seb

[Dudu]

Salut

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

Déjà il faudrait coder en HTML normal ce que ce code n'est pas (du tout)

Ensuite tu peux utiliser le PNG-8 pour profiter d'une transparence non alpha mais sans non plus se restreindre à 256 couleurs, IE reconnaît bien le PNG-8.

[MarvinLeRouge]

Sauf erreur de ma part, le png-8 est restreint à 256 couleurs, comme le gif (ou alors 'ai manqué un épisode).

[Yeb215]

Non Marvin tu n'as rien manqué.

J'ai semble-t-il trouvé la solution :

Selon REVAZ de www.trucsenvrac.com

"il y a un autre moyen , c'est de mettre tes images en png , et de rajouter un script qui permet d'avoir la transparence des png meme avec internet explorer.

il faut que tu crée un fichier que tu nomme pngfix.js , tu y met le script suivant :

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// [url=http://homepage.ntlworld.com/bobosola]http://homepage.ntlworld.com/bobosola[/url]. 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);

tu héberge ce fichier sur ton FTP , puis dans ta page HTML tu insère ce code :

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->



<!--[if gte IE 5.5000]> <script type=text/javascript src=url de pngfix.js></script><![endif]-->

tu peut voir que ce script est actif sur trucsenvrac."

Modifié 18 Septembre 2005 par Yeb215

[Beatnykk]

oui ce script fonctionne parfaitement (sauf si les utilisateurs désactivent js... ce qui est imparable de toute façon) mais c'est quand même scandaleux que exploreur ne le reconnaisse pas par défaut sans script.

[Yeb215]

Ce script ne fonctionne que pour les balises <img> ce qui fait que les background-image, c'est mort.

Faché j'utilise que ca.

Peut être qu'en passant les backgrounds en images de taille définie et en utilisant les Z-order y'a moyen, mais merde, on va quand même pas faire des sites optimisé pour Firefox !

Il sort quand le bidule explorer 7 ?

[Loupilo]

Dixit http://withstyle.biz/forum/viewtopic.php?id=167 :

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

Je vais peut-être être tangué, mais on s'en fout que ce code ne soit pas valide.

Certes, c'est on ne peut plus propriétaire, mais ton but, c'est que ça marche, ou pas ?

Les spécifications du W3C servent à définir des propriétés, un système de fonctionnement.

C'est important de les respecter. Cependant tu fais ton site pour tes visiteurs, et si tu peux essayer de contrer les lacunes de tel ou tel navigateur non-marginal, pourquoi hésiter ?

Ta CSS ne passera plus le validateur du W3C, mais dans le fond, tu n'as fait que rajouter une propriété non reconnue ; sur la forme, la manière dont elle est conçue, ta feuille reste valide !

Loupilo.

[MarvinLeRouge]

J'avais trouvé une page qui proposait un script pour les images d'avant et d'arrière plan. Ca doit se trouver avec une recherche genre "png fix js".