28173 sujets

CSS et mise en forme, CSS3

Semmi transparence d'une image png: problème avec IE6

Bonjour

Dans le site suivant,
http://emiran-tenere.nuxit.net/
le menu est constitué, pour chaque rubrique, de petits bandeaux rectangulaires qui sont en fait des png semi transparents. Avec IE7, Firefox, et Opera, notamment, cela sort bien. Mais cela sort sous forme de vilains bandeaux blancs opaques avec les versions de IE6 et antérieures.

J'ai pourtant inséré le script correctif suivant, qui ne semble pas faire grand chose. Auriez vous une idée? Merci d'avance

Philippe

<!--[if IE]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
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);
</script>
<![endif]-->


J'ai testé le script de Verdan, mais il n'a pas fonctionné. J'y suis finalement parvenu avec mon script d'origine.
J'ignore si c'est cela, mais je l'ai positionné dans le header (Il était dans le body) et ai remplacé if IE par if lt IE 7

Merci de vos réponses, et bonne continuation à tous

Philippe
Bonjour phrq,

La semin transparence n'est pas flagrante sous IE6...
Quid des liens que je t'ai fourni ? Smiley cligne

Cdt,
Sylvain
En effet, j'ai crié victoire trop vite. En fait, c'est plus compliqué que cela:

Le script d'origine fonctionne, et rétablit bien la semi transparence pour une image png.

L'ennui, c'est que l'image en question est en fait un background défini dans un css, et du coup, le script n'agit plus.

Voici le style css. 

	<style type="text/css">
            #menu {
	  			
               	list-style: none;
				padding: 5px 0px 5px 0px;
                margin: 0px;
                margin: 0px;
                width: 120px;
				height: 347px;
             }
             
            #menu li {
				margin-left: 3px;
             	margin-top: 1px;
			  	width: 114px;
              }
             
             #menu li a {
                display: block;
                font-size:13px;
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-weight: bold;
                text-decoration: none;
                color: #60100c;
				background: transparent url(http://emiran-tenere.nuxit.net/ressources/images/mise_en_page/blanc.png);              }
             
             #menu li a:hover {
                    background-image: url(http://emiran-tenere.nuxit.net/ressources/images/mise_en_page/none.gif);  
					background: transparent;
                    color: #fbecd2;
              }

</style>


L'image en cause est:
background: transparent url(http://emiran-tenere.nuxit.net/ressources/images/mise_en_page/blanc.png);


puis, le code du menu proprement dit, intégrant cette image:

<ul id="menu">
<li style="height:18px"><a href="http://emiran-tenere.nuxit.net/index.php">Accueil</a></li>
</ul>


Alors que si je mets ailleurs dans la page:
<img src="http://emiran-tenere.nuxit.net/ressources/images/mise_en_page/blanc.png"

la semi transparence s'affiche comme souhaité.

Comment faire agir ce scrit, dès lors?

Merci d'avance
phrq a écrit :
Comment faire agir ce scrit, dès lors?

On ne l'utilise pas.

À la place, on suit le conseil donné plus haut, c'est à dire qu'on se dirige vers la FAQ du forum pour savoir comment obtenir des images de fond avec transparence PNG dans IE6. Smiley smile
phrq a écrit :
... sauf çà fait un bon moment déjà que j'ai essayé...

Ah? J'avais lu que tu avais testé le script indiqué par Verdan, mais pas que tu avais appliqué les conseils de la FAQ du forum. Si c'est le cas, eh bien tu as du oublier quelque chose à un moment donné (par exemple, pour IE 5.5-6, de supprimer l'image de fond avant d'utiliser la propriété filter).

Bref:
1. Lire ou relire Obtenir la transparence PNG avec Internet Explorer 6.
2. Tenter de l'appliquer.
3. Si ça marche, tant mieux, c'est gagné.
4. Si ça ne marche pas, nous montrer où tu en es.

Pour information, les différents scripts Javascript que l'on trouve ici ou là ont tous recours aux filtres DirectX pour «peindre» une pseudo-image de fond transparente. Dans le cas des éléments img présents dans le code HTML, l'astuce consiste à remplacer ces éléments, lorsque la valeur de l'attribut src se termine par .png, par des blocs de même dimension auxquels on attribuera l'image comme pseudo-image de fond via un filtre DirectX.
bonjour Florent


OK Smiley smile
mais donc c'est valable aussi pour les images placées en background ? (la méthode de la FAQ)
car il y a une phrase qui parle des limitations de la méthode mais que je ne comprends pas bien...
verdan a écrit :
mais donc c'est valable aussi pour les images placées en background ? (la méthode de la FAQ)

Ben euh oui. De toute façon, sauf erreur de ma part, il n'y a pas d'autre méthode pour la transparence PNG dans IE6. Tous les scripts que l'on trouve sont juste des moyens d'automatiser les traitements décrits dans la FAQ.
Sujet clos
Aller à