 Ishimaru-Design
Graphic design, analyses, tips for your boards, sites, blogs
|
| View previous topic :: View next topic |
| Author |
Message |
Ishimaru Chiaki
ID Admin
Joined: 12 Nov 2007
Age: 24
Posts: 283
Location: Where the western wind always blows | Thanks Blood for the avatar ^^
|
 Posted: Sat Dec 01, 2007 11:35 pm Post subject: PNG transparent sous IE6 sans être invisible sous Opera |
 |
|
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 (phpBB par exemple) 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 :
| 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 |
|
| Back to top |
|
 |
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
Design by Ishimaru-Design
|
Website
