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.
Part 1: Thumbnail button functionality
-
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
- Make the view button hidden by default.
-
When a user hovers the mouse over a thumbnail, make the thumbnail's view button reappear.
- use either CSS or javascript to achieve this