AlphaImageLoader est un filtre CSS développé par Microsoft. La principale utilisation de ce filtre est de permettre d'obtenir un affichage correct des zones transparentes que peuvent comporter les images PNG, sous Internet Explorer 6. En effet, IE6 affiche les zones transparentes en gris clair, ce qui est assez embêtant et peut faire tache au sein de votre design.
Je vais donc vous expliquer comment fonctionne AlphaImageLoader ; il existe deux techniques plus ou moins distinctes pour l'utiliser, mais avant, un petit point de théorie sur ce filtre s'impose.
Structure
AlphaImageLoader s'applique au moyen de la propriété CSS
filter, comme ceci :
Code : CSS1 | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
|
La seule chose à modifier est l'attribut
src, qui représente l'url de votre image .png.
Utilisation avec l'élément IMG
Imaginons que votre image soit insérée au moyen de l'élément
IMG. Il va falloir passer par l'élément
IMG pour les navigateurs autres qu'IE, et un élément
DIV sur lequel on appliquera le filtre, dans le cas d'Internet Explorer. Pour faire la différence entre les types de navigateurs je vais utiliser des instructions conditionnelles.
Code : HTML1
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]-->
|
J'applique donc l'AlphaImageLoader sur un élément
DIV. Il est très important de spécifier une position relative ainsi que la hauteur et la largeur de l'image, sinon l'image ne sera pas correctement affichée (elle risque d'être étirée).
Utilisation en arrière-plan
Il peut être intéressant de créer son design avec des images d'arrière-plan, notamment pour faire des menus. Si votre image d'arrière-plan est au format PNG, il faut utiliser l' AlphaImageLoader directement dans les CSS (élément
STYLE ou feuille de style externe).
Là encore, il vaut mieux utiliser des instructions conditionnelles, car il va se poser un problème au niveau de la propriété
background.
Pour mettre une image d'arrière-plan, on utilise donc la propriété
background (ou
background-image, au choix), seulement, le filtre ne remplace pas l'arrière-plan, et cet arrière-plan s'affichera sous IE6 malgré l'AlphaImageLoader, comme le démontre le code suivant :
Code : CSS1
2
3
4
5
6
7 | #div {
background: url(data/rectangle.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');
height: 130px;
width: 260px;
margin: auto;
}
|
Pour régler ce léger problème, il suffit d'appliquer un
background: none ; pour Internet Explorer, et c'est pour ça qu'on va utiliser des instructions conditionnelles, de manière à obtenir un code propre et valide, car la propriété
filter n'est pas valide.
Pour la simplicité de compréhension, je vais utiliser les éléments STYLE pour définir les styles CSS. Libre à vous d'utiliser des feuilles de style.
On commence par les styles généraux :
Code : CSS 1
2
3
4
5
6
7
8
9
10 | <style type="text/css">
<!--
#div {
background: url(data/rectangle.png) no-repeat;
height: 130px;
width: 260px;
margin: auto;
}
//-->
</style>
|
Et ensuite, dans une instruction conditionnelle, on définit les CSS qu'Internet Explorer 6 interprétera :
Code : CSS1
2
3
4
5
6 | <!--[if IE 6]><style type="text/css">
#div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');
background: none;
}
</style><![endif]-->
|
Mais il subsiste un problème plutôt étrange ! Si vous avez essayé de mettre un lien hypertexte au sein de l'élément auquel l'arrière-plan est appliqué (
#div, dans mon exemple), ce lien n'est plus cliquable sous Internet Explorer (le même problème survient avec les champs de texte et les éléments qui régissent à
hover). Une solution toute simple pour régler ce bug est de placer le lien, ou les liens, en position relative, comme le montre l'exemple ci-dessous :
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <style type="text/css">
<!--
#div {
background: url(data/rectangle.png) no-repeat;
height: 130px;
width: 260px;
margin: auto;
}
#div a {
position: relative;
top: 10px;
left: 20px;
}
//-->
</style>
<!--[if IE 6]><style type="text/css">
#div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');
background: none;
}
</style><![endif]-->
|
Voci le code HTML qui va avec le CSS :
Code : HTML1 | <div id="div"><a href="http://nayi.free.fr/">Lien hypertexte</a></div>
|
Les PNG 24 Bits
) avec ce format graphique. Apportons-y une solution 
. En effet, Internet Explorer assombrit légèrement, vraiment très légèrement, les images PNG. Regardez cette image : à gauche, une image PNG avec Firefox, et à droite, la même image, mais avec IE (ce sont des captures d'écran) :
Ishimaru Chiaki
Trouvez une formation
Suggestions
Facebook