Accueil
Dernières images
Rechercher
S'enregistrer
Connexion[Tutoriel] Transparence PNG, version améliorée
2 participants
Publiweb :: Boîte à Services :: Tutoriels, astuces & support :: Tutos & Astuces : la Base de Données
Page 1 sur 1
![[Tutoriel] Transparence PNG, version améliorée Empty](https://2img.net/i/empty.gif)
[Tutoriel] Transparence PNG, version améliorée
par Ishimaru Chiaki Mar 6 Nov - 3:16
Note : Une partie des crédits va à revaz qui avait apporté ce script sur FA il y a longtemps. Suite à une astuce découverte par hasard sur le Site du Zér0, je réécris ce tuto afin de régler un problème de compatibilité qui gênait les utilisateurs d'Opera.
Voici comment procéder, étape par étape, pour installer le script.
Tout d'abord, on doit créer un fichier .JS qu'on hébergera par la suite pour le lier à votre site
(?) Pourquoi un fichier ?
On pourrait aussi bien mettre le code à même le site comme ceci :
Mais cette méthode n'est pas très commode, surtout si vous voulez l'enlever ou si vous avez mal copié le code.
Ainsi, en utilisant un fichier lié, on réduit les risques d'erreurs et c'est moins lourd à charger.
(?) Et maintenant, avec quoi je fais ce fichier ?
Pas besoin d'un éditeur spécialisé, le bon vieux Bloc-notes de Windows (Démarrer > Tous les programmes > Accessoires > Bloc-Notes) fait largement l'affaire. Vous pouvez aussi utiliser Notepad++ (gratuit et simple d'utilisation), mais je vais vous montrer la méthode avec le bloc-notes.
Ouvrez donc votre Bloc-notes, puis copiez-collez ce code :
Maintenant que c'est fait, vous devez enregistrer ce fichier au format .JS
/!\ ATTENTION : Vous devez entourer le nom de votre fichier avec des guillemets (exemple : "pngfix.js"). Sinon, votre fichier s'enregistrera comme ceci : pngfix.js.txt
Une fois votre fichier correctement enregistré, il vous faudra l'héberger
(?) Mais où puis-je l'héberger ?
Si vous voulez l'utiliser sur votre site qui est hébergé sur un FTP (Free, lycos, ovh, etc.), mettez-le sur votre FTP
Dans les cas des forums pré-hébergés tels que Forumactif, Xooit, etc. dont vous n'avez pas d'accès FTP, vous pouvez utiliser ce site très simple d'utilisation pour héberger votre script : http://pmsc.fr
Maintenant que votre script est hébergé, il est maintenant temps de l'insérer sur votre site/forum
(?) Comment l'insérer ?
Voici d'abord le code à utiliser :
Vous remplacez "ADRESSE_DU_FICHIER.js" par l'adresse que vous avez obtenue en hébergeant votre fichier.
(?) Et maintenant, où mettre ce code ?
Dans le cas des sites, ainsi que des forums où l'on peut modifier le code HTML ou les templates, vous insérez ce code entre les balises <head> et </head>
Si ce n'est pas le cas (dans le cas des blogs ainsi que des forums de type "forumactif"), vous devrez utiliser un champ dont le contenu inséré s'affiche sur toutes les pages, et qui est suffisamment long pour contenir tout le code, soit un minimum de 255 caractères. C'est soit le champ des balises méta (dans le cas des blogs notamment) ou la description du site (dans le cas des forumactifs par exemple)
Maintenant, vous avez inséré le code, mais il y a un problème : Ceux qui utilisent Opera ne verront pas vos jolis icones en PNG24 parce que ceux-ci leur apparaîtront comme complètement invisibles !
C'est là que le commentaire conditionnel intervient !
(?) Kesséça un commentaire conditionnel ?
En HTML, un commentaire apparaît comme ceci :
Mais un commentaire peut faire bien plus que du simple marquage pour retrouver un script !
Et lorsqu'on parle de "commentaire conditionnel", on parle d'un commentaire qui permet de ne faire fonctionner un code que si certaines conditions sont respectées. Comme par exemple, faire fonctionner un script seulement sous certains navigateurs !
Dans notre cas, le but du script dont je vous ai parlé dans le tuto, est de faire gérer la transparence des images .PNG à 16 millions de couleurs sous Internet Explorer 6, donc il n'est pas nécessaire que ce script s'active sous la version 7 d'internet Explorer, ni sous les autres navigateurs (Firefox, Opera, Safari) puisque ceux-là gèrent déjà cette transparence.
C'est donc là que cette astuce va nous être utile !
Voici donc le fameux commentaire conditionnel :
Donc, vous n'aurez qu'à entourer votre code de script avec ces commentaires. De cette façon, le script ne s'activera que chez les utilisateurs d'Internet Explorer 6 ! Et non seulement les utilisateurs d'Opera n'auront pas ce problème d'icones invisibles, mais en plus, le chargement de la page s'en trouvera allégé pour les navigateurs où le script ne s'active pas !
Donc, voici le code final à insérer :
Voilà, c'est tout !
Ishimaru
Note aux modérateurs : Si vous éditez ce message, il est impératif de cocher "Désactiver le HTML dans ce message" à chaque fois, avant d'envoyer, car sinon, mes codes disparaissent !
Voici comment procéder, étape par étape, pour installer le script.
Tout d'abord, on doit créer un fichier .JS qu'on hébergera par la suite pour le lier à votre site
(?) Pourquoi un fichier ?
On pourrait aussi bien mettre le code à même le site comme ceci :
- Code:
<script language=text/javascript>
<!--contenu de votre code-->
</script>
Mais cette méthode n'est pas très commode, surtout si vous voulez l'enlever ou si vous avez mal copié le code.
Ainsi, en utilisant un fichier lié, on réduit les risques d'erreurs et c'est moins lourd à charger.
(?) Et maintenant, avec quoi je fais ce fichier ?
Pas besoin d'un éditeur spécialisé, le bon vieux Bloc-notes de Windows (Démarrer > Tous les programmes > Accessoires > Bloc-Notes) fait largement l'affaire. Vous pouvez aussi utiliser Notepad++ (gratuit et simple d'utilisation), mais je vais vous montrer la méthode avec le bloc-notes.
Ouvrez donc votre Bloc-notes, puis copiez-collez ce code :
- Code:
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()
{
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
}
}
}
window.attachEvent("onload", correctPNG);
Maintenant que c'est fait, vous devez enregistrer ce fichier au format .JS
/!\ ATTENTION : Vous devez entourer le nom de votre fichier avec des guillemets (exemple : "pngfix.js"). Sinon, votre fichier s'enregistrera comme ceci : pngfix.js.txt
Une fois votre fichier correctement enregistré, il vous faudra l'héberger
(?) Mais où puis-je l'héberger ?
Si vous voulez l'utiliser sur votre site qui est hébergé sur un FTP (Free, lycos, ovh, etc.), mettez-le sur votre FTP
Dans les cas des forums pré-hébergés tels que Forumactif, Xooit, etc. dont vous n'avez pas d'accès FTP, vous pouvez utiliser ce site très simple d'utilisation pour héberger votre script : http://pmsc.fr
Maintenant que votre script est hébergé, il est maintenant temps de l'insérer sur votre site/forum
(?) Comment l'insérer ?
Voici d'abord le code à utiliser :
- Code:
<script language=Javasctipt src=ADRESSE_DU_FICHIER.js></script>
Vous remplacez "ADRESSE_DU_FICHIER.js" par l'adresse que vous avez obtenue en hébergeant votre fichier.
(?) Et maintenant, où mettre ce code ?
Dans le cas des sites, ainsi que des forums où l'on peut modifier le code HTML ou les templates, vous insérez ce code entre les balises <head> et </head>
Si ce n'est pas le cas (dans le cas des blogs ainsi que des forums de type "forumactif"), vous devrez utiliser un champ dont le contenu inséré s'affiche sur toutes les pages, et qui est suffisamment long pour contenir tout le code, soit un minimum de 255 caractères. C'est soit le champ des balises méta (dans le cas des blogs notamment) ou la description du site (dans le cas des forumactifs par exemple)
Maintenant, vous avez inséré le code, mais il y a un problème : Ceux qui utilisent Opera ne verront pas vos jolis icones en PNG24 parce que ceux-ci leur apparaîtront comme complètement invisibles !
C'est là que le commentaire conditionnel intervient !
(?) Kesséça un commentaire conditionnel ?
En HTML, un commentaire apparaît comme ceci :
- Code:
<!--commentaire-->
Mais un commentaire peut faire bien plus que du simple marquage pour retrouver un script !
Et lorsqu'on parle de "commentaire conditionnel", on parle d'un commentaire qui permet de ne faire fonctionner un code que si certaines conditions sont respectées. Comme par exemple, faire fonctionner un script seulement sous certains navigateurs !
Dans notre cas, le but du script dont je vous ai parlé dans le tuto, est de faire gérer la transparence des images .PNG à 16 millions de couleurs sous Internet Explorer 6, donc il n'est pas nécessaire que ce script s'active sous la version 7 d'internet Explorer, ni sous les autres navigateurs (Firefox, Opera, Safari) puisque ceux-là gèrent déjà cette transparence.
C'est donc là que cette astuce va nous être utile !
Voici donc le fameux commentaire conditionnel :
- Code:
<!--[if lte IE 6]>
<!--Contenu de votre code à ne faire activer que sous IE6-->
<![endif]-->
Donc, vous n'aurez qu'à entourer votre code de script avec ces commentaires. De cette façon, le script ne s'activera que chez les utilisateurs d'Internet Explorer 6 ! Et non seulement les utilisateurs d'Opera n'auront pas ce problème d'icones invisibles, mais en plus, le chargement de la page s'en trouvera allégé pour les navigateurs où le script ne s'active pas !
Donc, voici le code final à insérer :
- Code:
<!--[if lte IE 6]><script language=javascript src=ADRESSE_DU_FICHIER.js></script><![endif]-->
Voilà, c'est tout !
Ishimaru
Note aux modérateurs : Si vous éditez ce message, il est impératif de cocher "Désactiver le HTML dans ce message" à chaque fois, avant d'envoyer, car sinon, mes codes disparaissent !
Dernière édition par le Mar 6 Nov - 5:14, édité 1 fois
Ishimaru Chiaki- Evil catgirl
-
Nombre de messages : 144
Age : 40
Localisation : Coudonc, personne ne m'a souhaité bon anniv ici ?
Date d'inscription : 16/10/2007 -
Re: [Tutoriel] Transparence PNG, version améliorée
par Maxime Mar 6 Nov - 3:38
Sujet déplacé dans la section appropriée.
Maxime- Administrateur
-
Nombre de messages : 439
Localisation : Canada
Date d'inscription : 01/10/2007 -
Re: [Tutoriel] Transparence PNG, version améliorée
par Ishimaru Chiaki Mar 6 Nov - 5:16
En passant Maxime, j'ai dû éditer le message parce que je sais pas si tu l'avais édité, mais il faut absolument cocher "Désactiver le HTML dans ce message" à chaque fois qu'on édite, car sinon, les codes foutent le camp.
Ishimaru Chiaki- Evil catgirl
-
Nombre de messages : 144
Age : 40
Localisation : Coudonc, personne ne m'a souhaité bon anniv ici ?
Date d'inscription : 16/10/2007 -
Sujets similaires» [Tutoriel] Comment centrer un fond ?
» [Tutoriel] Comment régler la largeur de son forum ?
» Féeriqua Version 3: La lune contre le soleil
» Ishimaru-Design - Nouvelle version pour le printemps
» [Tutoriel] Comment régler la largeur de son forum ?
» Féeriqua Version 3: La lune contre le soleil
» Ishimaru-Design - Nouvelle version pour le printemps
Publiweb :: Boîte à Services :: Tutoriels, astuces & support :: Tutos & Astuces : la Base de Données
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum