Afficher un png en background d'une cellule

Version imprimable

Bonjour à tous

J'ai une page sur laquelle je veux afficher des png transparent. J'ai des problèmes pour les afficher dans Internet Explorer. J'ai utilisé ce code trouvé sur internet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
function correctPNG()
{
 
for(var i=0; i<document.images.length; i++)
{
	var img = document.images[i]
	var imgName = img.src.toUpperCase();
			alert(imgName);
 
	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);

mais le problème c'est qu'il ne prend pas en compte les images en arrière plan.
Or c'est le cas que j'ai une image en background d'un <td>.

Est ce que quelqu'un à une solution?

Merci d'avance

07/06/2007, 12h07
kaiser59
Salut,

Si je ne me trompe, les png ne sont pas voir, pas très bien geré par les IE <7 et pour y remedier d'après ceci png :

En résumé tu met ceci dans tes pages (celle contenant les png):
Code:

1 2 3 4 5 6 7 8 <head> ...  .... </head>
tu télécharges pngfix.js qui se situe dans le même lien qu'au dessus que tu mettra avec tes pages hebergé ;)

++

Si tu n'as qu'une image png, tu peux le faire manuellement niveau css. Exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>transp</title>
<style type="text/css">
table {background-color: #006600;}
.transp {background: url(transp.png);}
</style>
<!--[if IE 6]>
<style type="text/css">
.transp {
  background:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='transp.png');
}
</style> 
<![endif]-->
</head>
 
<body>
<table>
  <tr>
    <td class="transp"> sdg sdg dsg dsf</td>
    <td>sdg sdg dsg </td>
  </tr>
  <tr>
    <td>sdg dsg dgs </td>
    <td>sdg dsfg dsg</td>
  </tr>
</table>
</body>
</html>

07/06/2007, 13h04
Deallyra

pourquoi une suele image PNG CandyGirl?
Ce ne peut pas être étendu?
07/06/2007, 13h40
Candygirl

si aucun problème, c'est juste que suivant le nombre d'images ça risque d'être un peu fastidieux ;)

Pour un peu plus de précision, pour pouvoir appliquer le filtre, il on doit désactiver l'éventuel background-image de l'élément. D'autre part, dans mon exemple, j'ai utilisé la valeur scale, ce qui signifie que l'image va être étendue sur toute la surface de l'élément. On peut aussi appliquer la valeur crop qui positionnera juste l'image comme un background en top left et no-repeat. A ma connaissance, on ne peut malheureusement pas faire de repeat ou encore positionner l'image en bas à droite, par exemple. La doc officielle microsoft à ce sujet:
http://msdn2.microsoft.com/en-us/library/ms532969.aspx
07/06/2007, 14h14
guigui5931

J'ai utilisé la solution de Candygirl ça marche très très bien.
Par cotre je n'ai pas compris ce que tu veux dire par

Citation:

Pour un peu plus de précision, pour pouvoir appliquer le filtre, il ne doit pas y avoir de background à l'élément.

Moi dans mon cas j'ai un background sur ma table et un background sur ma cellule (celui qui est transparent) et ça marche très bien.

Merci beaucoup pour ton aide
07/06/2007, 14h15
Deallyra

là, je dirais pas que tu parles en japonnais car je saisirais quelques mots...
mais je suis perdue dans ton explication...
normale je suis une noob du CSS:mouarf:
07/06/2007, 14h28
Candygirl

Citation:

Envoyé par guigui5931

Moi dans mon cas j'ai un background sur ma table et un background sur ma cellule (celui qui est transparent) et ça marche très bien.

Si tu as copié le code que je t'ai donné, tu as noté le background:none; qui désactive ton image de fond pour IE6, ce qui est indispensable pour le bon fonctionnement du filtre.
07/06/2007, 14h35
guigui5931

J'avais pas compris. Merci pour votre aide.
07/06/2007, 14h39
Candygirl

Je m'étais mal exprimée; j'ai d'ailleurs édité mon message au cas où d'autres lecteurs se penchent dessus :)