Implement canvas or image maps on nav page

[smallplanetphantasmagoria]

• Canvas or image maps may be a more efficient way to handle clickable areas on the nav image.
• They can also be used to define more accurate click areas.

Several things about the process to consider:

• Each nav image/frame will require separate canvas/map coordinates.

• The nav arrows will require calling a function, rather than opening a link.

• By using an image map with the opacity set to 0, you can also define click areas on location page videos (e.g. for navigating to new areas, such as inside the Altair Bar or bookstore, that are inaccesible from the main nav).

• Canvas might be even more straightforward.

• Use a black overlay on the grid container with the video in, with a fade in and out to black effect, plus a delayed function call in between, to smoothly change video playlist.

[smallplanetphantasmagoria]

First attempts at implementing this did not work well.

• A canvas for the nav arrows was successful.
• After running into trouble with canvas for the nav image, I tried an image map.
• • Trying to implement the fade-out/-in for link clinks proved impossible.
• • Either restart trying to implement maps, stick with standard smooth transitions.
• • Need to reimplement anyway because the nav cycle started breaking.

[smallplanetphantasmagoria]

Canvas is implemented with the increased number of frames on the test page. Once clickable areas are fully functional, the main nav page will make use of canvas.

Since clickable areas will be directly drawn on the canvas, a transparent canvas can be used for: ``By using an image map with the opacity set to 0, you can also define click areas on location page videos (e.g. for navigating to new areas, such as inside the Altair Bar or bookstore, that are inaccesible from the main nav). this idea. Will open a new enhancement issue.