
| Page 1 | |||||
| Pseudo | Commentaire | ||||
|---|---|---|---|---|---|
| Page 1 | |||||
bracor
|
# Posté le 29/10/2006 à 16:14:31 | ||||
Ravioli.![]()
|
ereur
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
|
||||
Thunderseb
|
# Posté le 29/10/2006 à 16:54:19 | ||||
Responsable de la validation![]()
Ville : Liège |
corrigé
|
||||
magik-orion
|
# Posté le 24/11/2006 à 16:42:25 | ||||
I love Hewitt![]()
é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 |
||||
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. |
||||
Nanocom
|
# Posté le 09/12/2006 à 21:23:44 | ||||
![]()
Ville : Ittenheim |
Superbe
|
||||
Thibaud the Bête
|
# Posté le 31/03/2007 à 10:55:56 | ||||
![]()
|
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. |
||||
FluidBlow
|
# Posté le 19/07/2007 à 23:27:54 | ||||
|
|
bon tuto
|
||||
onlinegraphik
|
# Posté le 09/08/2007 à 09:59:18 | ||||
![]()
|
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 !!!
|
||||
zippy
|
# Posté le 29/10/2007 à 20:49:21 | ||||
Vive le Québec libre!![]()
Ville : Farnham |
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
|
||||
Thunderseb
|
# Posté le 03/11/2007 à 14:41:19 | ||||
Responsable de la validation![]()
Ville : Liège |
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é
|
||||
Ishimaru Chiaki
|
# Posté le 21/04/2008 à 05:42:04 | ||||
GIMP freak![]()
Ville : Baie-comeau |
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 ![]() |
||||
okens
|
# Posté le 04/08/2008 à 00:27:38 | ||||
Crystal Adventure![]()
Ville : Sarrebourg |
Citation : Thundertruc corrigé ![]() Non pas corrigé .
|
||||
Thunderseb
|
# Posté le 04/08/2008 à 09:07:58 | ||||
Responsable de la validation![]()
Ville : Liège |
Si
|
||||
Ishimaru Chiaki
|
# Posté le 09/12/2008 à 08:16:41 | ||||
GIMP freak![]()
Ville : Baie-comeau |
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 ![]() |
||||
didjo
|
# Posté le 28/01/2009 à 07:17:39 | ||||
![]()
|
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 ... |
||||
HeatBurns
|
# Posté le 21/03/2009 à 10:49:35 | ||||
00010010001101000101![]()
|
Excellent tutoriel. Très utile pour un webmaster.
![]() |
||||
Ishimaru Chiaki
|
# Posté le 13/08/2009 à 03:42:48 | ||||
GIMP freak![]()
Ville : Baie-comeau |
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 ![]() |
||||
Rob2
|
# Posté le 19/08/2009 à 12:13:00 | ||||
Don't worry, be hippie![]()
|
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 :![]() Ça devrait juste être des petites images de 16 x 16 pixels...
|
||||
Ishimaru Chiaki
|
# Posté le 23/08/2009 à 10:34:27 | ||||
GIMP freak![]()
Ville : Baie-comeau |
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 ![]() |
||||
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> |
||||
eric z
|
# Posté le 27/11/2009 à 14:51:40 | ||||
![]()
Ville : Clichy |
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
Ceci convient: Code : HTML
|
||||
Le Site du Zéro vous proposera bientôt de nouveaux cours partant de Zéro dans d'autres domaines que l'informatique !

