JavaScript : Point the Way!
Dr Benton
Our site pointer calls on two vertical frames. A lefthand frame contains a menu with all the links to point to, and a righthand
frame holds the map and the pointer. The aim is to move the pointer in the right frame with each click on an menu item in
the left frame.
Let's take a look at the right frame and its map:
<HTML>
<HEAD>
<TITLE>The Tour de France</TITLE>
</HEAD>
<BODY>
<DIV STYLE="position:absolute; top:0; left:0; height:370; width:394;">
<img src="carte.gif" width="370" height="394">
</DIV>
<DIV id="cible" STYLE="position:absolute; top:20; left:20; height:100; width:120;z-index:2;">
<img src="pointeur.gif">
</DIV>
</BODY>
</HTML>
The role of this frame is to display the map (
map.gif) and the mouse pointer (
pointer.gif). Each of these two images is first encapsulated in a mask to allow fine positioning.
The most important mask is named
cible. It contains our pointer. When your visitors click on a link, this mask will move to the requested location. We have initialised
it with a position at coordinates (
20,20), but you are free to set it in a non-visible area of the page (for instance,
-50,-50).
That's all there is to this frame. The other one will take up the larger part of this workshop: the pointing menu.