9.1 - Características do objeto Image

Acessando imagens

Da mesma forma que nos demais objetos da hierarquia, uma imagem pode ser referenciada pelo script através do array images[] (por exemplo, document.images[0] ) ou pelo nome definido no HTML através do atributo name da tag <img>.

<a href = ""
onMouseOver= "document.figura.src= 'fig1.gif'"
onMouseOut= "document. figura.src= 'fig2.gif'">
<img name="figura" border=0 SRC="fig2.gif">
</a>

O código acima pode ser lido da seguinte forma:

"Quando o usuário passar o mouse sobre o link, troque a imagem que aparece na página, por uma outra que está no arquivo fig1.gif; Quando o mouse sair do link restaure a imagem original (fig2.gif)."

A técnica utilizada neste exemplo, consiste em criar no menu dois conjuntos de imagens levemente diferentes de forma a ressaltar a imagem onde o mouse está passando. Os eventos onMouseOver e onMouseOut permitem que a imagem seja alterada convenientemente.

Propriedades do objeto Image

As características da imagem definidas na tag HTML são propriedades que podem ser consultadas ou alteradas dentro do script.

 Propriedades:
border -

Reflete o atributo border da tag <img>

height -

Reflete o atributo height da tag <img>

width -

Reflete o atributo width da tag <img>

src -

Reflete o atributo src da tag <img>

name -

Reflete o atributo name da tag <img>



 Eventos:
onLoad -

imagem terminou de ser carregada

onAbort -

usuário interrompeu a carga da página antes da imagem terminar de ser carregada

onError -

arquivo de imagem não foi encontrado ou está corrompido

Repare que os eventos onMouseOver e onMouseOut utilizados no exemplo anterior não são eventos de image e sim de link. Por isso eles aparecem na tag <a> ao invés de aparecer na tag <img>.