[Tutoriel] Transparence PNG, version améliorée

Voir le sujet précédent Voir le sujet suivant Aller en bas

[Tutoriel] Transparence PNG, version améliorée

Message par Ishimaru Chiaki le 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 :

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
avatar
Ishimaru Chiaki
Evil catgirl

Féminin
Nombre de messages : 144
Age : 33
Localisation : Coudonc, personne ne m'a souhaité bon anniv ici ?
Date d'inscription : 16/10/2007

Voir le profil de l'utilisateur http://ishimaru-design.servhome.org/phpBB2/index.php

Revenir en haut Aller en bas

Re: [Tutoriel] Transparence PNG, version améliorée

Message par Maxime le Mar 6 Nov - 3:38

Modérateur Sujet déplacé dans la section appropriée.

_________________
1- Merci de ne pas répondre aux messages de modération pour assurer la propreté de votre/vos sujet(s).
2- Voir les règlements généraux : ICI
avatar
Maxime
Administrateur
Administrateur

Masculin
Nombre de messages : 439
Localisation : Canada
Date d'inscription : 01/10/2007

Voir le profil de l'utilisateur http://publiweb.forumactif.biz

Revenir en haut Aller en bas

Re: [Tutoriel] Transparence PNG, version améliorée

Message par Ishimaru Chiaki le 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.
avatar
Ishimaru Chiaki
Evil catgirl

Féminin
Nombre de messages : 144
Age : 33
Localisation : Coudonc, personne ne m'a souhaité bon anniv ici ?
Date d'inscription : 16/10/2007

Voir le profil de l'utilisateur http://ishimaru-design.servhome.org/phpBB2/index.php

Revenir en haut Aller en bas

Re: [Tutoriel] Transparence PNG, version améliorée

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum