VML
HOME
PAGE

PNG24 et PNG8 dans IE (mise à jour: 01/2009)

 Internet Explorer a toujours su afficher les PNG transparents, mais en passant par VML. Voici une solution simple et efficace pour un affichage universel dans tous les navigateurs.

 Par la simple utilisation de l'élément <v:image... , vous afficherez vos PNG sans problème.

  Insérez le marquage sur fond bleuté du tableau ci-dessous dans votre code HTML.

<html xmlns:v=VML>

<head>
<style>
v\:*{behavior:url(#default#VML)}
v\:image{width:250;height:210}
img{width:250;height:210}

</style>

</head>

<body>

<![if vml]>
<v:image
class="" src="MonImage.png"
stroked="f"
 alt="MonImage" href="MonLien" target="" />
<![endif]>

<![if !vml]>
<a href="MonLien" target="">
<img     class="" src="MonImage.png" border="0"
 alt="MonImage" ></a>
<![endif]>

<!--
Pour l'application d'une bordure d'image:
pour v:image: stroked="t" strokeweight="2px" strokecolor="lime"
pour img:        style='2px solid lime'
-->

</body>
</html>

*Avec Internet Explorer vous pourrez même apporter des effets spéciaux à votre PNG comme appliquer un angle de rotation, une couleur de fond, une transparence etc... soient toutes les propriétés affiliées à l'élément <v:image. Exemple
A noter aussi l'avantage exceptionnel du lissage du PNG en cas de changement de dimensions.

POUR LES FONDS D'ÉCRAN "BACKGROUND"
<![if !vml]>
<body background="MonImage.png" >
<![endif]>

<![if vml]>
<body>
<v:background><v:fill src="MonImage.png" type=tile />
</v:background>
<![endif]>

POUR LES ZONES REACTIVES D'IMAGES «MAP»
... et un truc sympa pour visualiser et placer les zones mapées.

ATTENTION!
Les mentions <html xmlns:v=VML> et v\:*{behavior:url(#default#VML)}
sont toujours obligatoires pour l'affichage VML.

Cette image est au format PNG24 (45Ko)
Attributs de <v:image (seulement visibles avec IE)
Valeurs / défaut
   
 
 
 
 
 
Avec <v:rect , <v:imagedata , et <v:extrusion
 

°°°

Un PLUS très intéréssant pour des filtres couleur !!! :
(mais seulement avec IE toujours...):

Placez votre image dans le remplissage d'un rectangle VML.
Vous pourrez ainsi appliquer les attributs relatifs à l'élément <v:fill...

-Choisissez l'attribut type=pattern (il faudra cependant que votre image soit déjà au format voulu, et que les indications «style='width:" ";height;" "'» du rectangle correspondent à celles de l'image).

-Insérez les attributs: color="" et color2=""
Vous pourrez ainsi colorer à volonté votre png sur les bases du canal "blanc / noir"

-Ajoutez également l'attribut opacity="" (valeur: de 0.00 à 1.00)
Vous pourrez alors jouer sur la transparence de la totalité de votre image en type "frame", et de la couleur 2 en type "pattern".
Ces fonctions s'appliquent à tout format d'image (même multicolore), mais l'attribut opacity n'a pas d'efficacité sur la transparence progressive du png 24 (la superposition des transparences étant impossible).

Cette image est au format PNG8 (19,9Ko)

COULEUR 1





COULEUR 2





OPACITÉ COULEUR 2
OPACITÉ GLOBALE

VOICI LE CODE:
<html xmlns:v=VML>

<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>

<body>

<table>
<tr><td><h4>COULEUR 1</h4>
<input style='width:90' type=button value=Fuchsia onclick="IMG.color='fuchsia'"><br>
<input style='width:90' type=button value=Yellow onclick="IMG.color='yellow'"><br>
<input style='width:90' type=button value=Aqua onclick="IMG.color='aqua'"><br>
<input style='width:90' type=button value=Lime onclick="IMG.color='lime'"><br>
<input style='width:90' type=button value=White onclick="IMG.color='white'">
<td id=OPG align=center style='filter:alpha(opacity=100)'>
<v:rect style='width:370;height:200' stroked=f>
<v:fill id=IMG src="Auto.png" color2="" type=pattern /></v:rect>
<td><h4>COULEUR 2</h4>
<input style='width:90' type=button value=Blue onclick="IMG.color2='blue'"><br>
<input style='width:90' type=button value=Green onclick="IMG.color2='green'"><br>
<input style='width:90' type=button value=Maroon onclick="IMG.color2='maroon'"><br>
<input style='width:90' type=button value=Teal onclick="IMG.color2='teal'"><br>
<input style='width:90' type=button value=Black onclick="IMG.color2='black'">
<tr><td><td>
<input style='width:90' type=button value=opacity=0 onclick="IMG.opacity=0">
<input style='width:90' type=button value=opacity=0.15 onclick="IMG.opacity=.15">
<input style='width:90' type=button value=opacity=0.35 onclick="IMG.opacity=.35">
<input style='width:90' type=button value=opacity=0.5 onclick="IMG.opacity=.5">
<input style='width:90' type=button value=opacity=1 onclick="IMG.opacity=1">
<tr><td><td>
<input style='width:90' type=button value=opacity=0 onclick="OPG.filters.alpha.opacity=0">
<input style='width:90' type=button value=opacity=25 onclick="OPG.filters.alpha.opacity=25">
<input style='width:90' type=button value=opacity=40 onclick="OPG.filters.alpha.opacity=40">
<input style='width:90' type=button value=opacity=65 onclick="OPG.filters.alpha.opacity=65">
<input style='width:90' type=button value=opacity=100 onclick="OPG.filters.alpha.opacity=100">
<td></table>

</body>
</html>

http://midiwebconcept.free.fr/