Drop Down MenusUsing a combination of HTML, CSS, and JavaScript, I created a drop down menu complete with an interactive map created as an scalable vector graph (SVG). When hovering over the text of the link, the corresponding section of the map lights up. This works in reverse too, hovering over a section of the map highlights the chapter name that goes with it. The menu is clickable and does not rely on hovering; this is to avoid the annoyance of hovering menus disappearing. In addition, no separate behavior has to be defined for mobile devices. On mobile devices the only difference is that less icons are shown initially to save screen space and preserve icon size and readability.

Picture GalleryI created a simple yet elegant picture gallery to allow for clicking between pictures in a slideshow. The gallery is created using PHP to read the filenames of the pictures and thumbnails and then instructs JavaScript to pre-load all the pictures. While the pictures are loading a simple waiting gif and calculated percent complete is displayed over the gallery to prevent premature clicks on the thumbnails or arrows. Title, text, and picture are exchanged on each thumbnail or arrow click.

Countdown and Sliding BannerThe countdown banner (top) is run with JavaScript from a calculated date in the future. Once the supplied date passes the banner no longer appears. The sliding banner (bottom) displays the next three events on the lodge calendar, read from a MySQL database. When rolled-over, links appear for event info, registration links, and fliers. The links appear as soon as the material is ready and urls are supplied to the database.

Random Picture DisplayA PHP script randomly chooses one picture from the last three albums loaded to display on the homepage of Hassen Photography. The pictures are linked to the corresponding albums for viewing and ordering.