Skip to content

Latest commit

 

History

History
38 lines (22 loc) · 1.34 KB

README.md

File metadata and controls

38 lines (22 loc) · 1.34 KB
Raw

Javascript Events Continued

Assignment: Aspen's Adventure Gallery

Example

This assignment involves creating an interactive image gallery page themed around Aspen, a golden retriever. Students will focus on using JavaScript for DOM manipulation to handle dynamic content and user interactions. This gallery features thumbnails which allow users to select and view full-size images from smaller previews.

Instructions:

Part 1: Thumbnail button functionality

  1. When a user clicks the "view" button on a thumbnail preview, make the thumbnail's image appear in the large display window above.

    • Write some javascript for each thumbnail button so that, when clicked, the image in the mainDisplay is changed

      • Use the 'document object' to select the element with an id of "mainDisplayImage" and assign it to a variable called "mainDisplayImageHTML"

      • Access the "src" property on the mainDisplayImageHTML variable and assign the file path of the thumbnail's image to it.


Part 2: Thumbnail button presentation

Preview

  1. Make the view button hidden by default.

  1. When a user hovers the mouse over a thumbnail, make the thumbnail's view button reappear.

    • use either CSS or javascript to achieve this