Aller au menu - Aller au contenu

Les PNG 24 Bits


Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Pseudo Commentaire
Page 1 
Hors ligne bracor # Posté le 29/10/2006 à 16:14:31
Ravioli.
Avatar

ereur :p
Code : HTML
<!--[if IE]><div position: relative; style="height:130px; width:160px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');" ></div><![endif]-->
<!--[if !IE]><--><img src="data/rectangle.png" alt="Rectangle" /><!--><![endif]-->

bah alors ? On laisse trainer des attributs css en dehors de style="" ?
15, bien pratique ^^
Hors ligne Thunderseb # Posté le 29/10/2006 à 16:54:19
Responsable de la validation
Avatar
Validateurs

Ville : Liège
Pays : Belgique

corrigé ;) ^^
 
Hors ligne magik-orion # Posté le 24/11/2006 à 16:42:25
I love Hewitt
Avatar

études : EPITA

Super génial le truc pour les PNG 24 pour IE, ça faisait très longtemps que j'avais abandonner ça ! ;)
Merci beaucoup beaucoup beaucoup et vive FF :)

Cisland

Secret (cliquez pour afficher)
19/20 !!!!

PHP5 - SQL - AS3 - ASP.NET - JS (prototype) - xHTML - CSS2 - Java 2
 
Hors ligne trole # Posté le 04/12/2006 à 17:11:26

Le script sleight est vraiment super, c'est tout simple a ajouter a ca gere parfaitement la transparence sous IE! Merci.
Cependant je l'utilise pour des backgrounds et tout mes liens situés sur l'image deviennent inactifs...
Je me suis cassé la tete pour trouver une solution, et il semble que nombreux sont ceux qui rencontre le pb... et j'ai enfin trouvé: il suffit d'ajouter a{position:relative;} ds le CSS pour tout les liens situés sur l'image...on peut alors cliquer dessus!
Qu'en penses-tu??

Bon d'accord c'est moi qui suis nul, tout etait deja dans le tuto....mais j'avais pas tout saisi...merci.
Hors ligne Nanocom # Posté le 09/12/2006 à 21:23:44
Avatar

Ville : Ittenheim
Pays : France métropolitaine
études : INSA Lyon

Superbe ;)
Hors ligne Thibaud the Bête # Posté le 31/03/2007 à 10:55:56
Avatar

Bon tuto, mais PNGOptimizer ne fonctionne pas avec mes PNG.
Cependant, merci beaucoup pour le code qui permet de gérer la transparence de Javascript sur IE !

17


Citation : Roger Martin du Gard, dans Les Thibault
Si l'on ne fait pas le bien par goût naturel, que ce soit par désespoir ; ou, du moins, pour ne pas faire de mal.
 
Hors ligne FluidBlow # Posté le 19/07/2007 à 23:27:54

bon tuto

Image utilisateur
Statut Msn Messenger : fluidblow@hotmail.frImage utilisateur
 
Hors ligne onlinegraphik # Posté le 09/08/2007 à 09:59:18
Avatar

Bravo pour ce superbe tutaux Thunderseb !!! On apprécie de pouvoir faire comprendre à IE que le PNG est très utile !!
Je rencontre un seul souci....Je ne parviens pas à aligner mon image png et mon texte dans ma div (retour à la ligne non souhaité...). Dès que j'appique le script il y a un retour chariot après l'image et donc plus d'alignement de mon image et de mon texte :( ....quelque'un peux m'aider ??? Merci beaucoup et bonne journée à tous !!!
Hors ligne zippy # Posté le 29/10/2007 à 20:49:21
Vive le Québec libre!
Avatar

Ville : Farnham
Pays : Canada

Salut, j'ai essayer AlphaImageLoader dans le style CSS directement (une feuille spéciale pour ie) et le background (le png) s'affiche plus du tout! Je précise que c'est avec IE6 avec Wine sous Linux (grace au Script IEs4Linux) malheureusement j'ai rien d'autre pour tester alors le problème viens peut-être de la? Mais sa m'empêche d'arranger correctement ma page :/

Tk merci, le reste du tuto est exell ;)

Image utilisateur
 
Hors ligne Thunderseb # Posté le 03/11/2007 à 14:41:19
Responsable de la validation
Avatar
Validateurs

Ville : Liège
Pays : Belgique

Je pense que c'est la version Linux d'IE qui ne prend pas en compte les filtres CSS. Mais rien de sur, j'ai pas testé ^^
 
Hors ligne Ishimaru Chiaki # Posté le 21/04/2008 à 05:42:04
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada

Citation : onlinegraphik
Bravo pour ce superbe tutaux Thunderseb !!! On apprécie de pouvoir faire comprendre à IE que le PNG est très utile !!
Je rencontre un seul souci....Je ne parviens pas à aligner mon image png et mon texte dans ma div (retour à la ligne non souhaité...). Dès que j'appique le script il y a un retour chariot après l'image et donc plus d'alignement de mon image et de mon texte :( ....quelque'un peux m'aider ??? Merci beaucoup et bonne journée à tous !!!


J'ai ce même problème. J'avais essayé une fois sur un forumactif version phpBB2 et mes boutons se mettaient en retour chariot.

Là je viens de le tester sur une page Web où j'avais mis des boutons en PNG24 en libre service, et j'ai ce même retour chariot, d'après les captures pour IE6 par browsershots.org (je n'ai plus IE6)

Voici ce que j'ai : http://img.photobucket.com/albums/v381 [...] ows-2000-.png

Voici la page de test : http://ishimaru-design.bbgraf.com/eb-themes-part-h13.htm

(note : c'est l'ancienne version de mon site. La version actuelle est maintenant sur servhome).

Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar

Image utilisateur
 
Hors ligne okens # Posté le 04/08/2008 à 00:27:38
Crystal Adventure
Avatar

Ville : Sarrebourg
Pays : France métropolitaine

Citation : Thundertruc
corrigé ;) ^^

Non pas corrigé ;) .

Enchères au centime
Projet abandonné (jeu web) : Crystal-Adventure.
 
Hors ligne Thunderseb # Posté le 04/08/2008 à 09:07:58
Responsable de la validation
Avatar
Validateurs

Ville : Liège
Pays : Belgique

Si
 
Hors ligne Ishimaru Chiaki # Posté le 09/12/2008 à 08:16:41
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada

Je viens signaler quelquechose suite à des observations.

Étant donné que je travaille beaucoup avec des PNG pour mes thèmes de forums pour des raisons de qualité d'image, j'utilise le plus souvent de la fausse transparence lorsque je peux. Je n'ai pas installé pngoptimizer.

Pour mes thèmes ConnectixBoards, pratiquement tous mes PNG utilisent une fausse transparence, et je n'avais pas vu d'assombrissement sous IE.
Par contre, lorsque j'ai mis des dégradés PNG en provenance du design zUbuntu de metalking pour mon thème Ubuntu pour phpBB3, j'ai vu cet assombrissement et d'ailleurs, celui qui a examiné mon thème m'a fait remarquer l'assombrissement.

En comparent les PNG de mes thèmes CB et les dégradés de mon thème Ubuntu, j'ai remarqué que ces dégradés sont en PNG8, alors que quand je fais mes images, je les enregistre tout le temps en PNG24. J'ai donc mis les dégradés en mode RVB et enregistrés en PNG24, puis le même graphiste qui a examiné mon thème Ubuntu m'a confirmé qu'il n'y avait plus d'assombrissement.

Donc, ce problème d'assombrissement sous IE ne semble se produire que si nos PNG sont en couleurs indexés !

Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar

Image utilisateur
 
Hors ligne didjo # Posté le 28/01/2009 à 07:17:39
Avatar

Hum ...
Moi j'ai un dégradé en PNG (qui va du bleu à la transparence.) et avec sleight.js , le dégradé est supprimé et tout est dans un bleu à moitié transparent.

En fait si je mets l'image en background, sa fait une couleur bleu uniforme et transparent. Mais si je mets la même image dans une balise <img /> sa marche.

Nous détruisons le monde, et fatalement, le monde nous détruira ...
 
Hors ligne HeatBurns # Posté le 21/03/2009 à 10:49:35
00010010001101000101
Avatar

Excellent tutoriel. Très utile pour un webmaster.

Image utilisateur
 
Hors ligne Ishimaru Chiaki # Posté le 13/08/2009 à 03:42:48
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada

Je reviens sur le tutoriel pour donner les résultats d'une nouvelle expérimentation que j'ai faite suite à la réapparition récente du problème avec des PNG24 utilisant une fausse transparence.

Il se trouve que le problème survient lorsqu'on enregistre le gamma au moment d'enregistrer l'image au format PNG

Vous pouvez visualiser avec IE le résultat de mon expérimentation sur cette page de test, où j'ai testé avec PNG24, PNG8, avec ou sans canal alpha, avec ou sans gamma, et dans tous les cas, avec une fausse transparence : http://youwontfindme.editboard.com/Tes [...] lorer-h33.htm

EDIT : Suite à d'autres tests, il se trouve qu'il faut vérifier aussi au niveau de l'hébergeur d'image utilisé, car certains hébergeurs, comme Photobucket, appliquent un traitement gamma aux images lors de l'upload, ce qui fait toujours assombrir les PNG sous IE.

Donc, au final, les deux causes possibles de l'assombrissement, toutes deux liées au gamma :
- Enregistrement du gamma lors de l'export en PNG
- Traitement gamma lors de l'upload d'une image PNG sur un hébergeur d'image.

Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar

Image utilisateur
 
Hors ligne Rob2 # Posté le 19/08/2009 à 12:13:00
Don't worry, be hippie
Avatar

Excellent tutoriel, mais j'ai quand même un problème : mes images en background sont complètement déformées (quand elles s'affichent), j'ai fait une capture d'écran pour vous montrer :
Image utilisateur
Ça devrait juste être des petites images de 16 x 16 pixels...

 
Hors ligne Ishimaru Chiaki # Posté le 23/08/2009 à 10:34:27
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada

En effet, j'ai eu ce même problème avec sleight (et aussi iepngfix) en plus que ça mettait tous mes éléments <img /> en block.

Comme script de remplacement, je te conseille celui qui est indiqué dans ce tuto que j'ai rédigé sur phpbb-fr : http://forums.phpbb-fr.com/tutoriaux-p [...] et155267.html

Le script a été testé sur le thème Pro_vistablue de Samurai et mon thème Pro_ubuntu, tous deux pour phpBB3, avec succès.
Il marche à la fois pour les fonds et les <img />.

Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar

Image utilisateur
 
Hors ligne ccyborg # Posté le 18/09/2009 à 13:06:02

il y a aussi le script pngbehavior.htc que l'on peut trouver ici :
http://webfx.eae.net/download/pngbehavior102.zip

Chez moi il ne marchait pas pour ie6 voici le fichier corrigé... si ça interesse :

Citation

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>

/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
* for WebFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-05-09 When printing revert to original
* 2009-09-18 Fixed ie6 image disappearing
*
*/

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";

var realSrc = "";
var blankSrc = "/clear.gif";
var isPrinting = false;
if (supported) fixImage();

function propertyChanged() {
if (!supported || isPrinting) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;
// get native image size
var w = element.width;
var h = element.height;

// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + realSrc + "',sizingMethod='scale')";

// FIX for ie6 (v6.0.3790.3959)
if (/MSIE 6/.test(navigator.userAgent)) {
element.runtimeStyle.backgroundImage = 'url("'+blankSrc+'")';
element.runtimeStyle.backgroundPosition = '0 0';
element.runtimeStyle.width = w+'px';
element.runtimeStyle.height = h+'px';

element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + realSrc + "',sizingMethod='scale')";
}
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}

function afterPrint() {
isPrinting = false;
fixImage();
}

</script>
</public:component>
Hors ligne eric z # Posté le 27/11/2009 à 14:51:40
Avatar

Ville : Clichy
Pays : France métropolitaine

Merci pour ce très utile tutoriel.
Le code donné pour l'utilisation de AlphaImageLoader avec l'élément IMG n'affiche pas d'image pour les versions IE 7 et 8.

Code : HTML
1
2
3
4
5
<!--[if IE 6]><div style="position: relative; style="height:130px; width:160px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');" ></div><![endif]-->

<!--[if !IE]><-->
<img src="data/rectangle.png" alt="Rectangle" />
<!--><![endif]-->

Ceci convient:
Code : HTML
1
2
3
4
5
<!--[if IE 6]><div style="position: relative; style="height:130px; width:160px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');" ></div><![endif]-->
<!--[if gt IE 6]><img src="data/rectangle.png" alt="Rectangle" /><![endif]-->
<!--[if !IE]><-->
<img src="data/rectangle.png" alt="Rectangle" />
<!--><![endif]-->
Pour accéder à cette section
Connectez-vous !
connexion_rpx