JavaScript : Point the Way!
Dr Benton
We use a basic HTML menu, except that the links do not reference a URL:
<BODY BGCOLOR="#DDDDFF">
<FONT FACE="Arial">
<CENTER>Click on the stage of your choice:<BR><BR><BR></CENTER>
<A HREF="#" onclick="PointeVers(115,180);"><b>Prologue</b>: The Puy Du Fou</a><br><br>
<A HREF="#" onclick="PointeVers(310,85);"><b>Metz</b></a><br><br>
<A HREF="#" onclick="PointeVers(305,260);"><b>The Alpe d'Huez</b></a><br><br>
<A HREF="#" onclick="PointeVers(195,93);"><b>Finish</b> Paris</a><br><br>
</FONT>
</BODY>
</HTML>
To short-circuit the browser and avoid displaying a blank page or the error 404 page when a user clicks, simply add a hash
character (
#) as URL. This will direct the link towards the page already displayed.
To initiate the effect, you just need to intercept the event corresponding to the mouse click (
onclick) and call up the function
PointeVers(). This function expects two arguments that are the coordinates of the location on the map where our pointer is located in
the righthand frame. The position (
0,0) corresponds to the top left corner of the frame. Thanks to Paint Shop Pro, it is simple to obtain the coordinates of each
position to point to and to use them
via the function
PointeVers().