Usando o elemento Image

Este tópico descreve o VML, um recurso que foi preterido a partir do Windows Internet Explorer 9. Páginas da Web e aplicativos que dependem de VML devem ser migrados para SVG ou outros padrões amplamente compatíveis.

Observação

A partir de dezembro de 2011, este tópico foi arquivado. Como resultado, ele não é mais mantido ativamente. Para obter mais informações, consulte Conteúdo arquivado. Para obter informações, recomendações e diretrizes sobre a versão atual do Windows Internet Explorer, consulte Internet Explorer Developer Center.

 

Usando <image>

Neste tópico, ilustraremos como usar o <image> elemento para exibir imagens com vários efeitos especiais.

Se você quisesse exibir uma imagem carregada de uma fonte externa, normalmente usaria o <img> elemento fornecido em HTML e, em seguida, apontaria o atributo de propriedade src para o local do arquivo de imagem.

Como alternativa, você pode usar o <image> elemento fornecido no VML. Ao usar o <image> elemento , você pode criar apenas um arquivo de imagem e exibir a imagem de maneira diferente alterando os atributos de propriedade do <image> elemento. Além disso, o <image> elemento fornece vários efeitos especiais que você não pode fazer simplesmente usando o <img> elemento de HTML, como corte, contraste, brilho, gama e escala de cinza.

Voltar ao início

cortar

Você pode usar os atributos de propriedade cropbottom, croptop, cropleft e cropright do <image> elemento para exibir imagens diferentes que são cortadas do mesmo arquivo de imagem.

O valor desses atributos de corte representa o corte percentual da borda da imagem. O valor pode ser qualquer número entre 0 e 1. Por padrão, o valor é definido como 0, indicando que não há corte da borda. O valor 0,1 indica um corte de 10% da borda, o valor 0,15 indica um corte de 15% da borda e assim por diante.

Por exemplo, para exibir cinco imagens cortadas do mesmo arquivo de imagem, você pode usar o <image> elemento e especificar valores de corte diferentes, conforme mostrado na seguinte representação 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"/>

A primeira imagem, <v:image style='width:100pt;height:80pt' src="image1.jpg" />, não tem nenhum valor de corte. Portanto, 100% da imagem original é exibida em um tamanho de 100 pontos por 80 pontos.

A segunda imagem, <v:image style='width:85pt;height:64pt' src="image1.jpg" cropbottom="0.2" cropright="0.15"/>, tem alguns valores de corte. cropbottom="0.2" indica que 20% da imagem será cortada da parte inferior; cropright="0.15" indica que 15% da imagem será cortada da borda direita. A imagem restante é exibida em um tamanho de 85 pontos por 64 pontos.

Da mesma forma, a terceira, quarta e quinta imagens têm alguns valores de corte. A imagem original é cortada de acordo com os valores de corte e, em seguida, é exibida de acordo com o valor de largura e altura.

Voltar ao início

contraste

Você pode usar o atributo de propriedade gain do <image> elemento para exibir várias imagens que têm configurações de contraste diferentes.

O valor do atributo de propriedade gain pode ser qualquer número. Por padrão, o valor é 1, indicando o uso do mesmo contraste que a imagem original. O valor 0 não indica nenhum contraste. Quanto maior o número, maior o contraste.

Por exemplo, para exibir cinco imagens que têm configurações de contraste diferentes, você pode usar o <image> elemento e definir um valor diferente para o atributo de propriedade gain , conforme mostrado na seguinte representação 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 />

Quando o atributo de propriedade gain é definido como 0, toda a imagem fica cinza porque não há contraste. O contraste é mais perceptível quando o atributo de propriedade de ganho é definido como 3 do que quando é definido como 0,5. O contraste é invertido quando o atributo de propriedade de ganho é definido como um valor negativo, como -0,4.

Voltar ao início

Brilho

Você pode usar o atributo de propriedade blacklevel do <image> elemento para exibir várias imagens que têm configurações de brilho diferentes.

O valor do atributo de propriedade blacklevel pode ser qualquer valor entre 0 e 1. Por padrão, o valor é 0, indicando que o nível de brilho na imagem original é preservado. O valor 1 indica o nível mais alto de brilho.

Por exemplo, para exibir cinco imagens que têm configurações de brilho diferentes, você pode usar o <image> elemento e definir um valor diferente para o atributo de propriedade blacklevel , conforme mostrado na seguinte representação 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 />

Voltar ao início

escala de cinza

Você pode usar o atributo de propriedade em escala de cinza do <image> elemento para exibir imagens com ou sem escala de cinza.

O valor do atributo de propriedade de escala de cinza pode ser true ou false. Por padrão, o valor é definido como false para que a imagem seja exibida em cores. Se o valor for definido como true, a imagem será exibida em escala de cinza.

Por exemplo, conforme mostrado na imagem a seguir, a primeira imagem usa a configuração padrão (false)do atributo de escala de cinza (<v:image style='width:100pt;height:80pt' src="image1.jpg" /> ). Portanto, a imagem é exibida em cores.

A segunda imagem define o atributo de escala de cinza como true (<v:image style='width:100pt;height:80pt' src="image1.jpg" grayscale=true /> ). Portanto, a imagem é exibida em escala de cinza, conforme mostrado na seguinte representação VML:

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

Voltar ao início

gamma

Você pode usar o atributo de propriedade gama do <image> elemento para exibir imagens que têm configurações de gama diferentes.

O valor do atributo de propriedade gama pode ser qualquer valor entre 0 e 1. Por padrão, o valor é definido como 1.

Por exemplo, para exibir três imagens que têm configurações gama diferentes, você pode usar o <image> elemento e definir um valor diferente do atributo de propriedade gama , conforme mostrado na seguinte representação 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 obter mais informações sobre esse elemento, consulte a especificação VML .