Usar el elemento Image

En este tema se describe VML, una característica que está en desuso a partir de Windows Internet Explorer 9. Las páginas web y las aplicaciones que dependen de VML deben migrarse a SVG u otros estándares ampliamente compatibles.

Nota

A partir de diciembre de 2011, este tema se ha archivado. Como resultado, ya no se mantiene activamente. Para obtener más información, vea Contenido archivado. Para obtener información, recomendaciones e instrucciones sobre la versión actual de Windows Internet Explorer, vea Centro para desarrolladores de Internet Explorer.

 

Usar <image>

En este tema, se muestra cómo usar el <image> elemento para mostrar imágenes con diversos efectos especiales.

Si desea mostrar una imagen que se cargó desde un origen externo, normalmente usaría el <img> elemento proporcionado en HTML y, a continuación, apuntaría el atributo de propiedad src a la ubicación del archivo de imagen.

Como alternativa, puede usar el <image> elemento proporcionado en VML. Cuando se usa el <image> elemento , solo se puede crear un archivo de imagen y, a continuación, mostrar la imagen de forma diferente modificando los atributos de propiedad del <image> elemento. Además, el <image> elemento proporciona varios efectos especiales que no se pueden hacer simplemente usando el <img> elemento de HTML, como recortar, contraste, brillo, gamma y escala de grises.

Volver a la parte superior

crop

Puede usar los atributos de propiedad cropbottom, croptop, cropleft y cropright del <image> elemento para mostrar imágenes diferentes recortadas desde el mismo archivo de imagen.

El valor de estos atributos de recorte representa el porcentaje cortado desde el borde de la imagen. El valor puede ser cualquier número entre 0 y 1. De forma predeterminada, el valor se establece en 0, lo que indica que no hay ningún recorte desde el borde. El valor 0,1 indica un recorte del 10 por ciento desde el borde, El valor 0,15 indica un recorte del 15 por ciento desde el borde, etc.

Por ejemplo, para mostrar cinco imágenes que se recortan desde el mismo archivo de imagen, puede usar el <image> elemento y especificar valores de recorte diferentes, como se muestra en la siguiente representación de VML:

<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 primera imagen, <v:image style='width:100pt;height:80pt' src="image1.jpg" />, no tiene ningún valor de recorte. Por lo tanto, el 100 % de la imagen original se muestra con un tamaño de 100 puntos en 80 puntos.

La segunda imagen, <v:image style='width:85pt;height:64pt' src="image1.jpg" cropbottom="0.2" cropright="0.15"/>, tiene algunos valores de recorte. cropbottom="0.2" indica que el 20 por ciento de la imagen se recortará desde la parte inferior; cropright="0.15" indica que el 15 % de la imagen se recortará desde el borde derecho. A continuación, la imagen restante se muestra con un tamaño de 85 puntos por 64 puntos.

Del mismo modo, las imágenes tercera, cuarta y quinta tienen algunos valores de recorte. La imagen original se recorta según los valores de recorte y, a continuación, se muestra según el valor de ancho y alto.

Volver a la parte superior

contraste

Puede usar el atributo de propiedad gain del <image> elemento para mostrar varias imágenes que tienen una configuración de contraste diferente.

El valor del atributo de propiedad gain puede ser cualquier número. De forma predeterminada, el valor es 1, lo que indica el uso del mismo contraste que la imagen original. El valor 0 indica ningún contraste. Cuanto mayor sea el número, mayor será el contraste.

Por ejemplo, para mostrar cinco imágenes que tienen una configuración de contraste diferente, puede usar el <image> elemento y establecer un valor diferente para el atributo de propiedad gain , como se muestra en la siguiente representación de VML:

<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 />

Cuando el atributo de propiedad gain se establece en 0, toda la imagen se vuelve gris porque no hay contraste. El contraste es más evidente cuando el atributo de propiedad gain se establece en 3 que cuando se establece en 0,5. El contraste se invierte cuando el atributo de propiedad gain se establece en un valor negativo como -0,4.

Volver a la parte superior

luminosidad

Puede usar el atributo de propiedad blacklevel del <image> elemento para mostrar varias imágenes que tienen una configuración de brillo diferente.

El valor del atributo de propiedad blacklevel puede ser cualquier valor entre 0 y 1. De forma predeterminada, el valor es 0, lo que indica que se conserva el nivel de brillo de la imagen original. El valor 1 indica el mayor nivel de brillo.

Por ejemplo, para mostrar cinco imágenes que tienen una configuración de brillo diferente, puede usar el <image> elemento y establecer un valor diferente para el atributo de propiedad blacklevel , como se muestra en la siguiente representación de VML:

<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 />

Volver a la parte superior

escala de grises

Puede usar el atributo de propiedad de escala de grises del <image> elemento para mostrar imágenes con o sin escala de grises.

El valor del atributo de propiedad de escala de grises puede ser true o false. De forma predeterminada, el valor se establece en false para que la imagen se muestre en color. Si el valor se establece en true, la imagen se mostrará en escala de grises.

Por ejemplo, como se muestra en la imagen siguiente, la primera imagen usa la configuración predeterminada (false)del atributo de escala de grises (<v:image style='width:100pt;height:80pt' src="image1.jpg" /> ). Por lo tanto, la imagen se muestra en color.

La segunda imagen establece el atributo de escala de grises en true (<v:image style='width:100pt;height:80pt' src="image1.jpg" grayscale=true /> ). Por lo tanto, la imagen se muestra en escala de grises, como se muestra en la siguiente representación de VML:

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

Volver a la parte superior

gamma

Puede usar el atributo de propiedad gamma del <image> elemento para mostrar imágenes que tengan diferentes valores gamma.

El valor del atributo de propiedad gamma puede ser cualquier valor entre 0 y 1. De forma predeterminada, el valor se establece en 1.

Por ejemplo, para mostrar tres imágenes que tienen una configuración gamma diferente, puede usar el <image> elemento y establecer un valor diferente del atributo de propiedad gamma , como se muestra en la siguiente representación de VML:

<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 />

Para obtener más información sobre este elemento, consulte la especificación VML .