Utilisation de l’élément Image

Cette rubrique décrit VML, une fonctionnalité déconseillée à partir de Windows Internet Explorer 9. Les pages web et les applications qui s’appuient sur VML doivent être migrées vers SVG ou d’autres normes largement prises en charge.

Notes

Depuis décembre 2011, cette rubrique a été archivée. Par conséquent, il n’est plus géré activement. Pour plus d’informations, consultez Contenu archivé. Pour plus d’informations, de recommandations et d’aide sur la version actuelle de Windows Internet Explorer, consultez Centre de développement Internet Explorer.

 

Utilisation de <image>

Dans cette rubrique, nous allons illustrer comment utiliser l’élément <image> pour afficher des images avec divers effets spéciaux.

Si vous souhaitez afficher une image chargée à partir d’une source externe, vous utilisez généralement l’élément <img> fourni en HTML, puis pointez l’attribut de propriété src vers l’emplacement du fichier image.

Vous pouvez également utiliser l’élément <image> fourni dans VML. Lorsque vous utilisez l’élément <image> , vous ne pouvez créer qu’un seul fichier image, puis afficher l’image différemment en modifiant les attributs de propriété de l’élément <image> . En outre, l’élément <image> fournit plusieurs effets spéciaux que vous ne pouvez pas faire simplement à l’aide de l’élément HTML, tels que le rognage, le <img>contraste, la luminosité, le gamma et les nuances de gris.

Retour en haut de la page

crop

Vous pouvez utiliser les attributs de propriété cropbottom, croptop, cropleft et cropright de l’élément <image> pour afficher différentes images rognées à partir du même fichier image.

La valeur de ces attributs de rognage représente le pourcentage de coupe du bord de l’image. La valeur peut être n’importe quel nombre compris entre 0 et 1. Par défaut, la valeur est définie sur 0, ce qui indique qu’il n’y a pas de rognage à partir du bord. La valeur 0,1 indique un rognage de 10 % du bord, la valeur 0,15 indique un rognage de 15 % de l’arête, et ainsi de suite.

Par exemple, pour afficher cinq images rognées à partir du même fichier image, vous pouvez utiliser l’élément <image> et spécifier des valeurs de rognage différentes, comme indiqué dans la représentation VML suivante :

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:85pt;height:64pt' src="image1.jpg"
cropbottom="0.2" cropright="0.15"/>
<v:image style='width:50pt;height:44pt' src="image1.jpg"
cropbottom="0.45" cropleft="0.5"/>
<v:image style='width:80pt;height:56pt' src="image1.jpg"
croptop="0.3" cropright="0.2"/>
<v:image style='width:70pt;height:48pt' src="image1.jpg"
croptop="0.4" cropleft="0.3"/>

La première image, <v:image style='width:100pt;height:80pt' src="image1.jpg" />, n’a pas de valeur de rognage. Par conséquent, 100 % de l’image d’origine est affichée à une taille de 100 points sur 80 points.

La deuxième image, <v:image style='width:85pt;height:64pt' src="image1.jpg" cropbottom="0.2" cropright="0.15"/>, a des valeurs de rognage. cropbottom="0.2" indique que 20 % de l’image sera rognée par le bas ; cropright="0.15" indique que 15 % de l’image sera rognée à partir du bord droit. L’image restante est ensuite affichée à une taille de 85 points par 64 points.

De même, les troisième, quatrième et cinquième images ont des valeurs de rognage. L’image d’origine est rognée en fonction des valeurs de rognage, puis affichée en fonction des valeurs de largeur et de hauteur.

Retour en haut de la page

élevé

Vous pouvez utiliser l’attribut de propriété gain de l’élément <image> pour afficher différentes images qui ont des paramètres de contraste différents.

La valeur de l’attribut de propriété gain peut être n’importe quel nombre. Par défaut, la valeur est 1, ce qui indique l’utilisation du même contraste que l’image d’origine. La valeur 0 n’indique aucun contraste. Plus le nombre est élevé, plus le contraste est élevé.

Par exemple, pour afficher cinq images qui ont des paramètres de contraste différents, vous pouvez utiliser l’élément <image> et définir une valeur différente pour l’attribut de propriété gain , comme indiqué dans la représentation VML suivante :

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=0 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=0.5 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=3 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=-0.4 />

Lorsque l’attribut de la propriété gain a la valeur 0, l’image entière devient grise, car il n’y a pas de contraste. Le contraste est plus perceptible lorsque l’attribut de propriété gain est défini sur 3 que quand il est défini sur 0,5. Le contraste est inversé lorsque l’attribut de la propriété gain est défini sur une valeur négative telle que -0,4.

Retour en haut de la page

luminosité

Vous pouvez utiliser l’attribut de propriété blacklevel de l’élément <image> pour afficher différentes images qui ont des paramètres de luminosité différents.

La valeur de l’attribut de propriété blacklevel peut être n’importe quelle valeur comprise entre 0 et 1. Par défaut, la valeur est 0, ce qui indique que le niveau de luminosité de l’image d’origine est conservé. La valeur 1 indique le niveau de luminosité le plus élevé.

Par exemple, pour afficher cinq images qui ont des paramètres de luminosité différents, vous pouvez utiliser l’élément <image> et définir une valeur différente pour l’attribut de propriété blacklevel , comme indiqué dans la représentation VML suivante :

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=0.1 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=0.2 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=-0.05 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=-0.15 />

Retour en haut de la page

nuances de gris

Vous pouvez utiliser l’attribut de propriété grayscale de l’élément <image> pour afficher des images avec ou sans nuances de gris.

La valeur de l’attribut de propriété grayscale peut être true ou false. Par défaut, la valeur est définie sur false afin que l’image soit affichée en couleur. Si la valeur est définie sur true, l’image s’affiche en nuances de gris.

Par exemple, comme illustré dans l’image suivante, la première image utilise le paramètre par défaut (false) de l’attribut de nuances de gris (<v:image style='width:100pt;height:80pt' src="image1.jpg" /> ). Par conséquent, l’image est affichée en couleur.

La deuxième image définit l’attribut de nuances de gris sur true (<v:image style='width:100pt;height:80pt' src="image1.jpg" grayscale=true /> ). Par conséquent, l’image s’affiche en nuances de gris, comme illustré dans la représentation VML suivante :

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg"
grayscale=true />

Retour en haut de la page

gamma

Vous pouvez utiliser l’attribut de propriété gamma de l’élément <image> pour afficher des images qui ont des paramètres gamma différents.

La valeur de l’attribut de propriété gamma peut être n’importe quelle valeur comprise entre 0 et 1. Par défaut, la valeur est définie sur 1.

Par exemple, pour afficher trois images qui ont des paramètres gamma différents, vous pouvez utiliser l’élément <image> et définir une valeur différente de l’attribut de propriété gamma , comme indiqué dans la représentation VML suivante :

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gamma=0 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gamma=0.5 />

Pour plus d’informations sur cet élément, consultez la spécification VML .