[.png]problème de compatibilité
lucdor
Messages postés
25
Statut
Membre
-
gryzzly Messages postés 5220 Date d'inscription Statut Contributeur Dernière intervention -
gryzzly Messages postés 5220 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour
quelqu'un serait-il en mesure de me dire si la transparence sur une image .png sera gérée par IE ( sur FF elle l'est ) et quelles sont les possibilités pour qu'une image sur un fond transparent soit affichée convenablement sur IE?
Merci
quelqu'un serait-il en mesure de me dire si la transparence sur une image .png sera gérée par IE ( sur FF elle l'est ) et quelles sont les possibilités pour qu'une image sur un fond transparent soit affichée convenablement sur IE?
Merci
A voir également:
- [.png]problème de compatibilité
- Compatibilite windows 11 - Guide
- Pack de compatibilité microsoft office 2007 - Télécharger - Bureautique
- Macos 14 compatibilité - Accueil - MacOS
- Désactiver mode compatibilité word - Forum Word
- Recadrer image png - Forum Graphisme
4 réponses
Ah justement j'ai créé une petite vidéo explicative:
https://www.sebsauvage.net/temp/wink/gimp_transparence.html
Ceci dit, il y a quand même une astuce pour IE5.5 et 6) (qui ne supportent pas les PNG transparents.)
https://www.sebsauvage.net/temp/wink/gimp_transparence.html
Ceci dit, il y a quand même une astuce pour IE5.5 et 6) (qui ne supportent pas les PNG transparents.)
Salut,
Peut être quelqu'un aura la solution... et comment gérer la transparence png sous IE 6, lorsque nous n'avons aucune balise img dans le html (a savoir que tous les appels d'images se font par des calques (div) et feuilles de styles ?
car j'ai tenté le javascript faisant appel à directx, ca ne marche pas :-) (je devrais plutot :'( )
? une idée ? y'a vraiment aucun moyen ?
ps : merci de ne pas me citer le gif :-)
Peut être quelqu'un aura la solution... et comment gérer la transparence png sous IE 6, lorsque nous n'avons aucune balise img dans le html (a savoir que tous les appels d'images se font par des calques (div) et feuilles de styles ?
car j'ai tenté le javascript faisant appel à directx, ca ne marche pas :-) (je devrais plutot :'( )
? une idée ? y'a vraiment aucun moyen ?
ps : merci de ne pas me citer le gif :-)
Il y a même tellement de choses a voir sur ton site que j'arrive même a m'y perdre :o
Voila, c'est tout ce que j'ai a dire mis a part de te souhaiter une bonne continuation seb ;)
ta réponse m'a permis de contourner le problème grâce à l'astuce pour IE 5.5 et 6.
j'ai pourtant une 2ème colle pour :
les fonds d' images sont transparent dans un menu animer du genre manège ruban et maintenant elles sont fixes et à des emplacements assez fantaisistes donc mon problèmeet de rendre leur mobilité à toutes ces images.
je précise tout de même que cela fonctionne depuis un code html, un code css et un code js, collé ci-dessous.
Je suis preneur de toutes les méthodes envisageables.
Merci.
Je tiens à préciser que vu mon niveau je ne suis pas le créateur des codes mais que je les ai adaptés et merci aux auteurs de laisser les codes à disposition des novices.
code html:
<!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>
<title>
Menu du site
</title>
<script language="JavaScript" type="text/javascript" src="MenuDeroulant.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script defer type="text/javascript" src="pngfix.js"></script>
</head>
<body onload="javascript:Affichage();">
<div id="divMenuRuban">
<img id="i1" src="images/icone_index.png" class="imag" alt="Accueil" title="site officiel de l'US Lalinde Handball" onclick="javascript:Lien(this);"/>
<img id="i2" src="images/icone_actus.png" class="imag" alt="Actualités" title="La vie du club"onclick="javascript:Lien(this);"/>
<img id="i3" src="images/icone_resultats.png" class="imag" alt="Résultats"title="Tous les résultats" onclick="javascript:Lien(this);"/>
<img id="i4" src="images/icone_classements.png" class="imag" alt="Classements"title="Tous les classements "onclick="javascript:Lien(this);"/>
<img id="i5" src="images/icone_galeries.png" class="imag" alt="Galeries" title="Toutes les photos"onclick="javascript:Lien(this);"/>
<img id="i6" src="images/icone_partenaires.png" class="imag" alt="Partenaires"title="Sponsors et liens divers "onclick="javascript:Lien(this);"/>
<img id="i7" src="images/icone_arbitrage.png" class="imag" alt="Arbitrage" title="Des doutes= des réponses"onclick="javascript:Lien(this);"/>
<img id="i8" src="images/icone_technique.png" class="imag" alt="Technique" title="Un peu de formation"onclick="javascript:Lien(this);"/>
<img id="i9" src="images/icone_next.png" class="imag" alt="Prochains matches"title="Au suivant" onclick="javascript:Lien(this);"/>
<img id="i10" src="images/icone_last.png" class="imag" alt="Derniers matches" title="Tous les résumés"onclick="javascript:Lien(this);"/>
<img id="i11" src="images/icone_contacts.png" class="imag" alt="Contacts" title="comment nous contacter ? "onclick="javascript:Lien(this);"/>
<img id="i12" src="images/icone_vide.png" class="imag" alt="Vide" title="En construction"onclick="javascript:Lien(this);"/>
<img id="Imgfond" src="images/logo_main_500_400_bis.png" alt="logo" usemap="#Menu" style="border:0" />
<map id="Menu" name="Menu">
<area shape="rect" alt="Gauche" coords="0,0,500,200" onmouseover="javascript:DefilementGauche();" onMouseOut="javascript:ArretDefilement();" href="" />
<area shape="rect" alt="Droite" coords="0,0,800,600" onmouseover="javascript:DefilementDroite();" onMouseOut="javascript:ArretDefilement();" href="" />
</map>
</div>
</body>
</html>
code css:
body
{
width:800px;
margin:left; /* Pour centrer notre page */
margin-top:20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom:10px; /* Idem pour le bas du navigateur */
background-color: black;
}
.imag
{
position:absolute;
cursor: hand;
border : 0;
}
#divMenuRuban
{
position:absolute;
top :50px;
left : 180px;
}
code js:
// Fichier JavaScript
var angle=0;
var timer;
var FlgDefilement = "Non";
function Affichage ()
{
for(i=1;i<13;i++)
{
var Gauche = 180+300*(Math.cos(angle+i*Math.PI/6));//emplacement du menu déroulant par rapport à l'image de fond//
document.getElementById("i"+i).style.left=Gauche+"px";
var Hauteur = 80+50*(Math.sin(angle+i*Math.PI/6))+document.getElementById("i"+i).width/2;
document.getElementById("i"+i).style.top=Hauteur+"px";
agl=angle+i*Math.PI/6;
document.getElementById("i"+i).width=45*(Math.sin(agl))+60;//taille des icones//
document.getElementById("i"+i).style.zIndex=200*(Math.sin(agl))+400;
document.getElementById("i"+i).style.opacity=(Math.sin(agl)+1)*0.50;
document.getElementById("i"+i).style.filter="alpha(opacity="+(Math.sin(agl)+1)*200+")";
}
}
function Defilement()
{
switch (FlgDefilement)//vitesse de défilement//
{
case "Droite" :
angle=angle-0.015;
break;
case "Gauche" :
angle=angle+0.015;
break;
default :
angle=angle;
}
Affichage ();
}
function DefilementDroite()
{
if (FlgDefilement!="Droite")
{
FlgDefilement="Droite";
timer=setInterval("Defilement()",20);
}
}
function DefilementGauche()
{
if (FlgDefilement!="Gauche")
{
FlgDefilement="Gauche";
timer=setInterval("Defilement()",20);
}
}
function ArretDefilement()
{
clearInterval(timer);
FlgDefilement="Non";
}
function Lien (LienRedirection)
{
switch(LienRedirection.id)
{
case "i1" :
document.location="http://intranet/agenda/"
break;
case "i2" :
document.location="http://intranet/"
break;
case "i3" :
document.location="http://intranet/Liste_Etudes/"
break;
case "i4" :
document.location="http://intranet/adresses/"
break;
case "i5" :
document.location="http://intranet/"
break;
case "i6" :
document.location="http://intranet/"
break;
case "i7" :
document.location="http://intranet/gesper/"
break;
case "i8" :
document.location="http://intranet/"
break;
case "i9" :
document.location="http://intranet/"
break;
case "i10" :
document.location="http://intranet/"
break;
case "i11" :
document.location="http://intranet/"
break;
case "i12" :
document.location="http://intranet/"
break;
}
}
code js:
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
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
}
}
}