Explaining the LANTERNA

Versao Portuguesa   Esta página em Português.

This DHTML technique introduces an element of surprise in a home page, such as in The Lascaux Caves, France (April 2000). The LANTERNA (lantern or pocket lamp in Portuguese) also contributes to a feeling of mystery, of "being underground", in games, puzzles, or role-playing adventures designed in HTML.

The working principle is simple: in the HTML page body ( <BODY> ... </BODY> ) there is only one image. A black solid layer, named "spot", slides over the body.

The "spot" layer has just a small transparent area in the middle, opening a window to the page body, beneath it. The solid layer is created either from a table or an image that fills all the layer.

The "spot" layer location is controlled with JavaScript. Assuming the transparent area is associated to the mouse pointer, the offset (PX, PY) from the centre of transparent window to the leftmost top corner of the layer is computed. As the mouse pointer moves, the layer location is adjusted by subtracting (PX, PY) from the mouse pointer. This creates an effect of "layer dragging".
The base image

The "spot" layer must be design to hide the whole base image. If the mouse is allowed to scan the whole base image, the size of "spot" layer should be twice the size of the base image on each direction.

It should be noticed that if the base image is smaller than the browser window, the area hidden by the layer should be bounded to the base image. The simplest form to achieve it is to create a frameset with frame approximately the size of the base image, and put the remaining elements in other frames. Since the layer is part of the frame code its spatial boundaries coincide with the frame's boundaries. This is how I did and also did the people at Lascaux. A more complex form of achieving the same result without frames is to use the clip property, which defines the visible area of each layer. This was note used here to avoid confusing the reader. Moreover, it requires some additional computation effort from the browser.


The "spot" layer over the base image

The illusion of "dragging the layer" is simulated with an animated GIF image. Currently, it is not possible to render images or layers partially transparent with DHTML, although the CSS 2.0 specification includes this feature.

If the transparent area is not rectangular it is necessary to use a GIF image to define the shape of the window. The image should be black in the solid areas and white on the transparent areas. Then, it should be saved using the white as transparent colour.

The "spot" layer can be coded in two ways:

  1. A single image fills all the layer.
    • Advantages: the coding is immediate. If the GIF image is saved in two colour mode , the file is very small, even for large images (this example requires a 1280x960 pixel image with 2.5Kb).
    • Disadvantages: the browser must allocate a lot of memory for such a large image. The layer movements are slower and less smooth.
  2. A table with the total layer dimension and a small image on the centre.
    • Advantages: the layer movement is swift and smooth.
    • Disadvantages: the coding is a bit more ellaborate.

I chose the second solution, which seems to be the optimal choice. At the right, the reader will find the code for both solutions.

The code of the "spot" layer

One image fills all the layer

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

Table with an image at the center

<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>

The function responsible for "dragging" the "spot" layer is defined in function spot_move(evt) { .. } . It is called every time the mouse pointer moves.

Apart from slight implementation differences for Netscape Navigator and Microsoft Internet Explorer, the procedure is as follows:

  1. read the mouse pointer coordinates: clikX and clikY .
  2. verify whether the pointer is within the horizontal boundaries of the base image. In case it is, the left coordinate is defined from the pointer coordinate, subtracted by half the horizontal size of the layer: clikX-1280/2 .
  3. verify whether the pointer is within the vertical boundaries of the base image. In case it is, the top coordinate is defined from the pointer coordinate, subtracted by half the vertical size of the layer: clikY-960/2 .

If the pointer is outside the image boundaries the function is inactive.

Dragging the "spot" layer

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;
}

Although the visual effect is pleasant, it is frustrating to realise that one can not interact with the base image. It would be much more interesting if one could click on the image "hot spots" to find more about it or follow to other pages.

That's what we'll cover next.

In case of doubt, critics or suggestions, please contact me.

Created on 28th May, 2000 Return to the LANTERNA. ©2000 João Gomes Mota
jsgm@gomes-mota.nome.pt
The base image was taken from "Les 7 vies de l'Épervier, tome 5 - Le Maître des Oiseaux" by Cothias and Juillard