Javascript Techniques

The  background to this page shows the opening page of an earlier version of this website that was designed as a single-page web application maintained under the Polyhymnia Content Managemenr Sysytem, itself also described on this site.

What made this opening page rather interesting was that the images all constituted part of the navigation, so you could go into various parts of the website either by the menu at the top (which doesn’t appear in this image as it was added by the Javascript) or by clicking on any of the images.

Because the images overlap, the “currently selected” image, on mouse hover, appeared with a highlight, as shown below.

What was particularly important was that these “hotspot” areas be correctly resized when the browser window size was changed. You can see the code that hndles this HERE.