Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: sam54 le le 15-11-2007 a 11:02:37

Titre: transparence d'image
Posté par: sam54 le le 15-11-2007 a 11:02:37

Bonjour à tous !

J'ai un petit problème (sans doute rien de grave)
J'ai positionné des images pour créer le "corps" de mon site web.
Sous dreamweaver, elles apparaissent comme je le désire. Disont que les angles du corps sont arrondis.=> Exemple (http://samulorraine.free.fr/dr.PNG)
Mais en apercu et même en ligne, je n'ai plus cette transparence au niveau des angles. Ces derniers sont remplis en blanc...=> exemple2 (http://samulorraine.free.fr/apercu.PNG)

Quelle est l'option qui permet de corriger cela ??

Merci par avance de vos réponses.

Titre: Re:transparence d'image
Posté par: lefou le le 17-11-2007 a 12:12:45

Lorsque tu enregistres tes images, as-tu pensé à gérer la transparence (gif ou png) sinon le fond est blanc par défaut ?

Titre: Re:transparence d'image
Posté par: sam54 le le 17-11-2007 a 19:02:32

Mes extensions de fichiers sont en PNG...
Quand je l'es ouvre sous photoshop, les angles sont bien transparent (il y a les damiers gris et blanc). Sous dreamweaver cette transparence est également bien respectée mais c'est une fois lors de l'apercu ou la mise en ligne du site cette dernière n'est plus respectée... Je vois pas d'où cela proviens.

Une autre soluce ??

edit : il semblerai que sous firefox cette transparence apparaisse correctement mais sous IE cela n'est pas respecté...
y aurai t-il une balise ou une propriété à mettre dans le css pour forcer IE à respecter la transparence des PNG ?

Titre: Re:transparence d'image
Posté par: Krash le le 01-12-2007 a 19:07:01

la seule chose à faire c'est enregistrer en gif ou alors tu enregistre en jpeg mais tu mets le meme dans le coin de ton image ce qu'il devrait y avoir en fond

Titre: Re:transparence d'image
Posté par: Itachi68 le le 05-12-2007 a 17:17:39

C'est posible d'afficher des png transparents sous Internet Explorer 6 avec un petit script que tu met entre tes balises <head> et </head> (PS: celà n'affecte pas les images d'une feuille de style et si celà déformes d'autres images png non transparentes convertit les en jpg et modifie ton code) exemple: http://pagesperso-orange.fr/ichigo-style/galerie.html (http://pagesperso-orange.fr/ichigo-style/galerie.html) .


Code:

<!--[if lt IE 7]>
<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]-->

Titre: Re:transparence d'image
Posté par: Miridan le le 17-12-2007 a 14:33:57

Salut,
Pour reprendre au debut, IE 6 ne gère pas la transparence sur les PNG 24 et 32 bits (en natif du moins)...

Donc soit tu essai de les enregistrer en GIF tranparents (ou PNG 8 bits, il me semble que ça passe). Ce qui te permettras également de réduire le poid de ton image.
Soit tu essai le script de notre ami Itachi68 ;)

Titre: Re:transparence d'image
Posté par: jb_gfx le le 17-12-2007 a 22:55:10

Citation de: Miridan le le 17-12-2007 a 14:33:57
Ce qui te permettras également de réduire le poid de ton image.


Et d'avoir un résultat trés laid

Titre: Re:transparence d'image
Posté par: Miridan le le 18-12-2007 a 09:33:20

Citation de: jb_gfx le le 17-12-2007 a 22:55:10
Citation de: Miridan le le 17-12-2007 a 14:33:57
Ce qui te permettras également de réduire le poid de ton image.


Et d'avoir un résultat trés laid


ça sa dépend de ton image... Si il y a plus de 256 couleurs (photos), en effet, le résultat, ne seras sans doute pas térrible...
Cependant pour l'utilisation que veut en faire notre amis sam54, je doute que son image ai plus de 256 couleurs et donc tu auras une qualité parfaite ! Bien mieux qu'avec du jpeg où tu à des pertes due à la compression (sous réserve de bien l'exporter en gif ou en png "exacte").

Titre: Re:transparence d'image
Posté par: jb_gfx le le 18-12-2007 a 23:02:54

Sauf que:

PNG24 = 24s bit pour l'image + 8 bits pour la transparence
PNG8 = 8 bits pour l'image dont 1 bit pour la transparence

Peu importe le type d'image, la transparence en PNG8 (ou en GIF) est toujours de mauvaise qualité.


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.