Menu
∞ Gráficos e Multimédia ∞
A característica visível mais atractiva em qualquer linguagem de programação é sempre a que se relaciona com a criação e manipulação de objectos gráficos e multimédia.
O JavaScript disponibiliza um conjunto de ferramentas que permitem ao utilizador realizar algumas aplicações bastante interessantes no domínio gráfico e multimédia, embora este tipo de funcionalidades não deva ser levado demasiado a sério, caso seja necessário o desenvolvimento de aplicações gráficas exigentes, tais como jogos de intenso grafismo, deverá ser utilizado outro tipo de tecnologia, tal como o Java.
Imagem
As imagens existentes nos formatos gráficos mais usuais (GIF, JPEG) integram-se nos documentos HTML de uma forma natural, por recurso ao elemento HTML <img ...>.
A sintaxe, é a seguinte:
<img src = "URL_ficheiro_imagem.extensao" >
No atributo src indicamos a localização e o nome do ficheiro que contem a imagem a colocar na página HTML.
A sintaxe para a introdução de imagens é a seguinte:
<html>
<head>
<title>Imagem</title>
</head>
<body>
<img src = "imagem.jpg">
</body>
</html>
O JavaScript permite o tratamento dinâmico das imagens, sendo utilizado um array denominado images, para designar as diversas imagens que estiverem presentes no documento HTML.
Cada imagem é na verdade um objecto Img com o seguinte conjunto de propriedades:
Propriedades
border
Corresponde ao atributo border do elemento HTML <img ... >, que define
a presença ou não de uma linha à volta da imagem.
complete
Indica se a imagem já foi completamente carregada.
height
Altura em pixels da imagem.
width
Largura em pixels da imagem.
hspace
Define o número de pixels que a imagem irá aparecer deslocada em relação à margem esquerda da
janela do browser.
vspace
Define o espaçamento em pixels da imagem em relação ao topo da janela do browser.
lowsrc
Especifica uma imagem de baixa resolução a ser carregada antes de a imagem completa estar carregada.
name
Nome da imagem.
src
URL do ficheiro de imagem.
Apesar de não ter métodos associados, o objecto image (img), tem várias funções gestoras de evento associadas:
Funções Gestoras de Evento
onabort
Ocorre quando o utilizador pára o carregamento da imagem antes de este se completar.
onerror
Ocorre se a imagem não for encontrada ou o ficheiro desta for inválido.
onkeydown
Acontece se uma tecla é pressionada.
onkeypress
Idem quando uma tecla é pressionada e largada.
onkeyup onload
Idem quando uma tecla é largada.
onload
Ocorre quando a imagem termina de ser carregada.
Vejamos um exemplo para se familiarizar com este mecanismo. A primeira coisa a fazer é criar algumas imagens que encadeadas dêem a ilusão de movimento:
<html>
<head>
<title>Rotação de imagens</title>
</head>
<body>
<img src = "imagem1.jpg" height = "75" width = "75">
<img src = "imagem2.jpg" height = "75" width = "75">
<img src = "imagem3.jpg" height = "75" width = "75">
<img src = "imagem4.jpg" height = "75" width = "75">
</body>
</html>
Naturalmente que, se pretendemos dar a ilusão do movimento, as imagens não podem aparecer todas ao mesmo tempo, como estamos a fazer com este exemplo.
Assim, o que há a fazer é carregar as imagens num array de imagens e fazer aparecer cada uma delas em sequência.
<html>
<head>
<title> Rotação de imagens </title>
<script language="Javascript" type="text/javascript">
function init() { //Inicializa o programa
//Carrega todas as figuras no array figuras
for (var k = 0 ; k <= 3 ; k++) {
figuras[k] = new Image();
figuras[k].src = "imagem" + (k+1) + ".jpg";
}
//Cria um timeout, para fazer a troca de imagem
window.setTimeout("troca_imagem()", 1000);
}
//Troca de imagem para a imagem seguinte
function troca_imagem() {
if (corrente < 3) {
corrente++;
} else {
corrente = 0;
}
// A troca faz-se por alteração de uma propriedade do objecto images[0]
document.images[0].src = figuras[corrente].src;
// Novo timeout para trocar de novo em 1 Seg
window.setTimeout("troca_imagem()", 1000);
}
//Main
var figuras = new Array(4); //Array de imagens
corrente = 0; //Figura Corrente
</script>
</head>
<body onload = "init()" >
<img src = "imagem1.jpg" height = "75" width = "75" />
</body>
</html>
Este exemplo baseia-se num mecanismo de timeouts, mecanismo que já vimos atrás. O primeiro timeout é activado na função init(), que funciona como gestora do evento load associada à página HTML. Antes disso, nesta função são também carregadas no array figuras as quatro figuras JPG que vão compor o movimento.
Quando o timeout expira (ao fim de 1 segundo), a função troca_imagem() é chamada. Esta encarrega-se de trocar a imagem, bastando para tal alterar o atributo src do objecto JavaScript que representa a imagem colocada na página.
Após efectuada a troca da imagem, é iniciado novo timeout para a função ser de novo chamada em 1 segundo e haver nova troca. O controlo da imagem a entrar em cada instante é efectuado guardando o número da imagem na variável corrente, que vai tomando valores entre 0 e 3, índices das imagens no array figuras[].
O efeito visual é interessante, com a imagem parecendo mover-se, rodando de segundo a segundo.
No JavaScript as imagens são referenciadas por um array images[], pelo que, só existindo uma é referenciada por: document.images[0];
Se existissem outras imagens na folha, elas seriam referenciadas por document.images[1], etc..
Outro tipo de publicação que se pode fazer com imagens na World Wide Web consiste nos famosos Mapas de Imagem (Imagemaps), Estes são formados por imagens inseridas normalmente nas páginas, mas divididas em zonas lógicas seleccionáveis como qualquer vulgar link e com o mesmo efeito.
Vejamos um exemplo de um mapa de imagem, criado com o auxílio de um editor de mapas.
<html>
<head>
<title> Mapa de imagens </title>
</head>
<script language="Javascript" type="text/javascript">
function publicidade() { //Faz entrar a publicidade
document.images[1].src = "pub.jpg";
}
function retira() { //Coloca o anuncio de defeito
document.images[1].src = "def.jpg";
}
function limpa() { //Coloca o painel em branco
document.images[1].src = "nada.jpg";
}
</script>
<body>
<table>
<tr>
<td>
<img src = "mapa.jpg" usemap = "#mapa" >
<map name = "mapa">
<area shape = "rect" coords = "14,11,179,87" href = "artes.html" onmouseover = "publicidade()">
<area shape = "rect" coords = "14,92,179,165" href = "letras.html" onmouseover = "'retira()">
<area shape = "rect" coords = "15,170,178,243" href = "cinema.html" onmouseover = "retira()">
<area shape = "rect" coords = "183,12,340,245" href = "programa.html" onmouseover = "retira()">
<area shape = "default" href = "default.html" onmouseover = "limpa()">
</map>
</td>
<td> <img src = "nada.jpg"> </td>
</tr>
</table>
</body>
</html>
O evento de passar por cima de uma <area> é detectado utilizando a função gestora de evento de tipo onmouseover. Os painéis publicitários estão colocados em ficheiros JPG e são substituídos quando as funções gestoras de evento actuam sobre a propriedade SRC da segunda imagem da página HTML.