Afficher un png en background d'une cellule

**guigui5931** · 07/06/2007, 11h43

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**kaiser59** · 07/06/2007, 12h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<head>
...
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
....
</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é

++

**Candygirl** · 07/06/2007, 12h31

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Deallyra** · 07/06/2007, 13h04

pourquoi une suele image PNG CandyGirl?
Ce ne peut pas être étendu?

**Candygirl** · 07/06/2007, 13h40

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

**guigui5931** · 07/06/2007, 14h14

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

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

**Deallyra** · 07/06/2007, 14h15

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

**Candygirl** · 07/06/2007, 14h28

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.

**guigui5931** · 07/06/2007, 14h35

J'avais pas compris. Merci pour votre aide.

**Candygirl** · 07/06/2007, 14h39

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

Afficher un png en background d'une cellule

HTML

Discussions similaires

Partager

Partager