Como funciona a lanterna

English Version   This page in English.

Este efeito de DHTML constitui um elemento de surpresa numa página de abertura tal como no site La Grotte de Lascaux, França (em Abril 2000). Pode também ser usado para criar uma atmosfera lúgubre ou subterrânea em jogos, puzzles ou aventuras gráficas feitas em HTML.

O princípio de funcionamento é simples: no corpo da página HTML ( <BODY> ... </BODY> ) apresenta-se apenas uma imagem.

Coloca-se por cima uma camada (layer) completamente opaca (e de preferência negra) apenas com um pequeno orifício transparente que permita ver o corpo da página. Esta camada opaca é criada a partir de uma tabela ou de uma imagem que ocupe toda a janela.

A posição da camada opaca, que neste exemplo se chama "spot", é controlada por JavaScript. Admitindo que o orifício transparente está associado ao rato, calcula-se a posição (PX, PY) do centro do orifício em relação ao canto superior esquerdo da camada. Cada vez que o rato se move, redefine-se a posição da camada subtraindo (PX, PY) à posição do rato.

 Cave: a imagem base
A imagem base

A camada "spot" deve ser dimensionada para cobrir toda a imagem base. Isto significa que as dimensões da camada em cada direcção devem ser cerca do dobro das dimensões da imagem para que, quando o orifício se localiza em cada um dos cantos da imagem, o outro extremo esteja ainda coberto.

Note-se que quando a imagem é mais pequena do que a janela do browser é necessário limitar a zona tapada pela camada "spot" para não cobrir os outros elementos. Isto pode ser realizado de várias formas. A forma mais simples é criar uma frame com a dimensão aproximada da imagem. Como o layer é parte da frame, tem os limites espaciais desta. Foi assim que fiz e também é assim que é feito nas grutas de Lascaux. Outra forma de o fazer, mais complexa, é utilizar a propriedade clip que define a área de visibilidade de um layer. Não foi aqui adoptada para não confundir o leitor e porque envolve um maior esforço do browser.

Deslocando layers sobre a imagem
O layer "spot" sobreposto à imagem.

Este efeito é aqui simulado com um GIF animado. Por enquanto, é impossível fazer imagens ou layers parcialmente transparentes em DHTML, embora a especificação CSS 2.0 contemple essa hipótese.

Se o orifício não fôr rectangular torna-se necessário usar uma imagem GIF para definir a forma do orifício de visualização. A imagem a usar deve ser totalmente negra nas zonas opacas e branca nas zonas que se querem transparentes. Depois deve ser gravada escolhendo o branco como côr transparente.

A construção do layer "spot" pode fazer-se de duas formas:

  1. Uma imagem que cubra todo o layer.
    • Vantagens: a codificação é simples. Se a imagem GIF fôr reduzida a duas cores, o ficheiro é muito pequeno mesmo para imagens grandes (no caso deste exemplo, a imagem teria 1280x960 e ocupa 2.5Kb).
    • Desvantagens: o browser tem de reservar muita memória para uma imagem tão grande. A movimentação da janela torna-se mais lenta.
  2. Uma tabela com a dimensão total do layer e com uma pequena imagem no meio.
    • Vantagens: o movimento é rápido e suave. Exige menos memória.
    • Desvantagens: a codificação é um pouco mais complicada.

Escolhi a segunda solução, que me parece claramente melhor. À direita encontra-se o código HTML para as duas soluções.

Código do layer "spot"

Uma imagem ocupa todo o layer

<DIV ID="spot">
<IMG NAME="lanterna" SRC="lanterna3.gif" WIDTH="1280" HEIGHT="960" BORDER="0" ALT="">
</DIV>

Tabela com uma pequena imagem no centro

<DIV ID="spot">
<TABLE WIDTH="1280" HEIGHT="960" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD HEIGHT="430" BGCOLOR="#000000" COLSPAN="3">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#000000" WIDTH="590">&nbsp;</TD>
<TD HEIGHT="100" WIDTH="100"><IMG NAME="lanterna" SRC="lanterna2.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT=""></TD>
<TD BGCOLOR="#000000" WIDTH="590">&nbsp;</TD>
</TR>
<TR>
<TD HEIGHT="430" BGCOLOR="#000000" COLSPAN="3">&nbsp;</TD>
</TR>
</TABLE>
</DIV>

A função que desloca o layer "spot" está definida em function spot_move(evt) { .. } e é chamada sempre que o ponteiro do rato se move.

Àparte pequenas diferenças de implementação para Netscape Navigator e Microsoft Internet Explorer, a sequência de funcionamento é assim:

  1. ler a coordenada do ponteiro do rato: clikX e clikY .
  2. verificar se o ponteiro está dentro dos limites horizontais da imagem base. Em caso afirmativo, a coordenada esquerda ( left ) do layer "spot" é definida a partir da coordenada do rato subtraída de metade do tamanho horizontal do layer: clikX-1280/2 .
  3. verificar se o ponteiro está dentro dos limites verticais da imagem base. Em caso afirmativo, a coordenada do cimo ( top ) do layer "spot" é definida a partir da coordenada do rato subtraída de metade do tamanho vertical do layer: clikY-960/2 .

Se o ponteiro estive fora dos limites da imagem a função fica inactiva.

Movimentação do layer "spot"

function spot_move(evt) {
if(Nav4) {
 clikX=evt.pageX;
 clikY=evt.pageY;
 if((clikX>spotW/2-5) & (clikX<windW-spotW/2))  document.spot.left= clikX-1280/2;
 if((clikY>spotH/2) && (clikY<windH-spotH/2))  document.spot.top = clikY-960/2;
}
else if(IE4) {
 clikX=window.event.clientX;
 clikY=window.event.clientY;
 if((clikX>spotW/2-5) && (clikX<windW-spotW/2))   document.all.spot.style.pixelLeft= clikX-1280/2;
 if((clikY>spotH/2) && (clikY<windH-spotH/2))   document.all.spot.style.pixelTop = clikY-960/2;
}
return;
}

Embora este efeito seja agradável, torna-se frustrante quando se verifica que não se pode fazer nada com a imagem. Seria interessante poder "clicar" em pontos sensíveis para obter informações ou seguir para outras páginas.

É o que vamos ver a seguir.

Se tiver dúvidas, críticas ou sugestões, não hesite em contactar-me.

Criado em 27 de Maio de 2000 Voltar para a lanterna. ©2000 João Gomes Mota
jsgm@gomes-mota.nome.pt
A imagem base provém de "Les 7 vies de l'Épervier, tome 5 - Le Maître des Oiseaux", da autoria de Cothias e Juillard