Interprétrer du png sous IE6 avec CSS
flibouk
-
flashrom -
flashrom -
Bonjour,
voila mon probleme, j'ai développé un site internet qui marche tres bien. Mais je viens de m'apercevoir que sur les version d'internet explorer 6 c'est affreux en effet il ne gère pas la transparence de mes images png et me décale certaines image.
Comment y remédier ?
Voici par exemple le code d'une image dans ma feuille de style :
a#logo_gauche {
display: block;
position: absolute;
width: 555px;
height: 105px;
top: 10px;
left: 0px;
background: url(images/newlogo.png) no-repeat;
}
Merci par avance de votre aide.
voila mon probleme, j'ai développé un site internet qui marche tres bien. Mais je viens de m'apercevoir que sur les version d'internet explorer 6 c'est affreux en effet il ne gère pas la transparence de mes images png et me décale certaines image.
Comment y remédier ?
Voici par exemple le code d'une image dans ma feuille de style :
a#logo_gauche {
display: block;
position: absolute;
width: 555px;
height: 105px;
top: 10px;
left: 0px;
background: url(images/newlogo.png) no-repeat;
}
Merci par avance de votre aide.
3 réponses
-
Bonsoir. Télécharge le SP3 de XP :
http://www.microsoft.com/downloads/fr-fr/details.aspx?FamilyID=2fcde6ce-b5fb-4488-8c50-fe22559d164e
Puis IE8 pour XP :
http://www.microsoft.com/downloads/fr-fr/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b -
IE6 a ses bugs ... et ses contournements.
Par exemple :
http://jquery.andreaseberhard.de/pngFix/
Ou
http://www.twinhelix.com/css/iepngfix/
Cependant, il est vrai que IE6 est un navigateur en voie de disparition. -
le probleme c'est que ie6 est encore present sur plusieur ordinateurs du monde et il faut toujours qu'un site sois compatible avec ce dernier.
voila je te donne ici un script JS à mettre entre <head></head> et qui permet à ie6 de gerer la transparence des PNG et aussi les png donner comme background sur le fichier css.
bn chance.
le code:
//**********************
<script language="JavaScript" type="text/JavaScript">
/* ############## Configuration ############## */
// Chemin complet sans le nom de domaine de la page HTML vers les images appelées en CSS
var ImgsPath = "images/";
// Gestion des exceptions
var Exceptions = new Array();
Exceptions[0] = "image-sans-transparence.png";
Exceptions[1] = "image-autre.png";
/*
Exceptions[2] = "";
etc...
*/
/* ############## Fin de Configuration ############## */
// Execution au chargement de la page
window.onload = function() {
PngFixImg();
PngFixBkground();
}
// Mise en transparence des <img /> PNG
function PngFixImg() {
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[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
}
//if
}//for
}//if
}//function
// Mise en transparence des images PNG en background CSS
function PngFixBkground() {
// Tableau des feuilles de styles
var StyleSheets = document.styleSheets;
// Boucle sur les feuilles de styles
for(i=0; i<StyleSheets.length; i++)
{
// Si il s'agit d'Internet Explorer
if(StyleSheets[i].rules)
{
Rules = StyleSheets[i].rules;
// Boucle sur les règles de la feuille de style
for(j=0; j<Rules.length; j++)
{
// Si la règle contient une propriété "background"
if(
(Rules[j].style.background) ||
(Rules[j].style.backgroundImage) ||
(Rules[j].style.backgroundRepeat)
)
{
// Récupération des règles
if(Rules[j].style.background)
{
BkgroundImg = Rules[j].style.background.match('[a-z0-9_-]*\.png');
BkgroundRepeat = Rules[j].style.background.match('repeat|repeat\-x|repeat\-y|no\-repeat');
}
else
{
BkgroundImg = Rules[j].style.backgroundImage.match('[a-z0-9_-]*\.png');
BkgroundRepeat = Rules[j].style.backgroundRepeat;
}
// Prise en compte des exceptions
var regex = new RegExp(BkgroundImg, 'g');
var yatil = regex.test(Exceptions);
// Si l'image de fond est un PNG
if(
(BkgroundImg != null) &&
(yatil == false)
)
{
// Détermination du sizingMethod suivant la méthode de repétition de l'image
if(BkgroundRepeat != null)
{
// Cas "Etirer"
if(
(BkgroundRepeat == "repeat") ||
(BkgroundRepeat == "repeat-x") ||
(BkgroundRepeat == "repeat-y")
)
{sizingMethod = 'scale';}
// Cas "Rogner"
else
{sizingMethod = 'crop';}
}
// Retrait de l'image de fond
Rules[j].style.backgroundImage = "none";
// Application du filtre
Rules[j].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + ImgsPath + BkgroundImg + "', sizingMethod='" + sizingMethod + "')";
} // if
} // if
} // for
} // if
} // for
}
</script>
