Baixe Javascript - 09 e outras Notas de estudo em PDF para Informática, somente na Docsity!
Capítulo 9 - Imagens
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 9-
Imagens
EM JAVASCRIPT, É POSSÍVEL MANIPULAR COM AS IMAGENS DE UMA PÁGINA, alterando a URL que localiza o arquivo de imagem. Assim, pode-se trocar a imagem que está sendo exibida por outra durante a exibição da página. Também é possível criar novos objetos representando imagens que inicialmente não aparecem na página e transferir seus arquivos previamente em background , para que estejam disponíveis na memória na hora da substituição. Com esses recursos, pode-se incrementar a página com recursos dinâmicos, como ícones que mudam de aparência quando ocorre um evento, animações e banners. As imagens utilizadas em JavaScript podem ser carregadas de duas formas: através do HTML e através de instruções JavaScript. As imagens estáticas , fornecidas pela página HTML através do descritor , são representadas como objetos da página (document), acessíveis através da sua propriedade images: um vetor que contém referências para todas as imagens do documento. As imagens dinâmicas, que não são fornecidas pelo HTML, podem ser criadas como objetos JavaScript dentro de qualquer bloco Desenvolvendo Web Sites Interativos com JavaScript
9-2 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
que calculará o tamanho da imagem quando ela for carregada. Depois que um objeto do tipo Image é criado, e suas dimensões definidas, seu tamanho não pode mais ser alterado. Todas as imagens passadas para a referência figura5 abaixo serão redimensionadas para 50x100 pixels:
figura5.src = "square.gif"; // square.gif agora tem 50x100 pixels A propriedade src tem a mesma função do atributo SRC do descritor HTML : indicar a URL do arquivo-fonte da imagem. Toda página que possui o descritor HTML já possui um objeto Image que pode ser manipulado através da sua propriedade document.images (do tipo Array ). Para criar uma nova imagem no documento, é preciso usar HTML e o descritor , cuja sintaxe geral está mostrada abaixo:
** USEMAP="#mapa" ONABORT="Código JavaScript" ONERROR="Código JavaScript" ONLOAD="Código JavaScript"_ > Todos os atributos, com exceção de SRC, são optionais. Para manipular uma imagem do HTML em JavaScript, é preciso usar o vetor images que contém referências para cada uma das imagens do documento, na ordem em que elas aparecem no código HTML:
prima = document. images[0]; // primeira imagem da página atual nona = document. images[8]; // nona imagem da página atual Assim como formulários e frames , que são acessíveis através de vetores ou nomes, as imagens podem receber um nome, para tornar o seu acesso mais fácil. O atributo HTML opcional NAME, se presente, pode ser usado pelo JavaScript para fazer referência à imagem, em vez de usar o vetor images. É uma boa idéia, pois torna o código mais legível e independente da ordem e número de imagens na página. Por exemplo, a imagem:
pode ser referenciada do JavaScript da forma:
Desenvolvendo Web Sites Interativos com JavaScript
9-4 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
imagens tenham sido carregadas^1. O descritor funciona como uma janela onde a imagem pode ser exibida. Havendo um descritor na página, sua imagem original poderá ser substituída por qualquer imagem, cujo arquivo tenha sido carregado dinamicamente, através da propriedade src. Por exemplo:
document.images[0].src = animal.src ;
fará com que a imagem bat.jpg ocupe o lugar da primeira imagem da página (tapir.gif, na figura acima). O contexto gráfico não pode ser redimensionado^2 , então a imagem bat.jpg, que tem dimensões 200x200 será redimensionada e ocupará o espaço antes ocupado por tapir.gif (380x200). O resultado será uma imagem “esticada”. Veja a figura ao lado. A imagem também poderia ter sido substituída diretamente, sem precisar criar um novo objeto do tipo Image :
document.images[0].src = "../figuras/bat.jpg";
mas isto faria com que o browser tentasse carregar a imagem no momento em que a instrução acima fosse interpretada. Se uma página já foi completamente carregada e um evento dispara a instrução acima, o usuário teria que esperar que a imagem fosse carregada através da rede. No outro exemplo, a carga da imagem poderia ter sido feita antes. Quando o evento causasse a troca das imagens, ela estaria disponível no cache e seria substituiria a antiga imediatamente. Quando se utiliza várias imagens, é útil carregá-las todas antes do uso. Isto pode ser feito colocando instruções em um bloco (...)
(^1) É possível, porém, inserir dinamicamente um descritor na página, usando document.write(). (^2) JavaScript 1.
Capítulo 9 - Imagens
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 9-
As 10 imagens podem ser usadas para substituir outras imagens da página ou para fazer uma animação. Usando vetores, fica fácil manipular toda a coleção através de seus índices. Quando uma substituição ocorrer:
document.images[2].src = telas[5];
o arquivo será trocado imadiatamente, pois está disponível localmente. Quando se têm muitas imagens, o browser poderá demorar para mostrar a página, enquanto executa as instruções no . Uma forma eficiente de evitar esse problema, é colocar as instruções dentro de uma função global, e chamá-la quando a página tiver terminado de carregar, usando . Por exemplo:
poderá ser chamada depois que a página tiver sido carregada com:
...
Na transferência de imagens através da rede é comum acontecerem erros, provocando a interrupção da transferência ou a carga incorreta da imagem. A propriedade complete pode ser usada para verificar se uma imagem já foi carregada totalmente, antes de utilizá-la. complete contém o valor true somente se a imagem já foi carregada totalmente. Se ocorrer um erro ou a carga da imagem for interrompida, complete irá conter o valor false:
if ( telas[9].complete ) { iniciarAnimacao(); }
Eventos
Os atributos HTML de que respondem a eventos associados com imagens são:
Capítulo 9 - Imagens
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 9-
apagado = new Image(); aceso = new Image(); apagado.src = "dullbart.gif"; aceso.src = "brightbart.gif";
function apaga() { document.images[0].src = apagado.src; }
function acende() { document.images[0].src = aceso.src; }
Exercícios
9.1 Crie um banner animado usando JavaScript que mostre várias imagens em seqüência (use as imagens im-01.jpg a im-05.jpg (figura ao lado) disponíveis no diretório cap9/. As imagens devem ser carregadas previamente, logo após a carga da página (use ONLOAD). O intervalo de tempo entre cada imagem deve ser de um segundo (solução em cap9/anima.html).
9.2 Na página uma.html (figura abaixo) há 5 imagens preto-e- branco. Faça as seguintes alterações para que sua aparência seja mudada de acordo com o movimento do mouse do usuário sobre as imagens (use os arquivos disponíveis no diretório cap9/): a) Faça com que cada imagem impb-nn.jpg (onde nn é 01 , 02 , 03 , 04 ou 05 ) seja trocada por sua correspondente a cores im- nn.jpg quando o mouse passar sobre a ela. b) Quando o mouse deixar a imagem e passar para outra área da página,
Desenvolvendo Web Sites Interativos com JavaScript
9-8 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
a imagem original (em preto e branco) deve ser restaurada. c) Faça com que cada imagem seja um link ativo para as páginas pag-01.html a pag- 05.html.
9.3 Inclua as páginas uma.html e menu.html em uma estrutura de frames como ilustrado abaixo (use o arquivo frame.html). Clicar em uma das imagens deve fazer com que a janela principal seja ocupada pela página referenciada pelo link (pag-01.html a pag- 05.html) e que a imagem (não a página) da janela secundária seja trocada por uma imagem correspondente (menu01.gif a menu02.gif).
