Question
I need a photo gallery web page with five images consisting of THREE files: index.html, style.css, and photo-gallery.js. The five thumbnails are horizontally aligned, and
I need a photo gallery web page with five images consisting of THREE files: index.html, style.css, and photo-gallery.js. The five thumbnails are horizontally aligned, and a large image should appear under the thumbnails with a caption. This photog gallery web page the following JavaScript functions:
- First, a large image and its caption appear when a mouse is hover over; a larger version of the second thumbnail and the caption of the second thumbnail are shown when a mouse is on the second thumbnail.
- Second, a border is added to a thumbnail and its large image when the thumbnail is clicked. When another thumbnail is clicked, it should be removed.
These could be two or three JavaScript functions consisting of for loop and if/else statement.
The below is the project instructions:
PROJECT COMPONENTS A complete photo gallery must feature the following components on the HTML web page: 1. A Title 2. Five thumbnail images (refer to "Sourcing Free, High-Resolution Images on the Internet"). 3. Large image areatodisplay a larger version of the selected thumbnail image. 4. Descriptive captions that are relevant to the image being displayed.
PROJECT FUNCTIONALITY A complete photo gallery must provide the following functionality: 1. A JavaScript mouse event will: (a)Display the matching caption when the thumbnail image is hovered over. 2. JavaScript functions (2 or 3) will: (a)Add a border to a thumbnailimage when it is clicked, remove the border when anotherthumbnail image is clicked (hint: use a for loop that targets CSSclasses)*. (b) Display the selected thumbnail in the large image area (hint: use an if/else statement)*. (c)Add or alter any element in the DOM. NOTE1:*(a) and (b) above may be combined into one function.
PROJECT REQUIREMENTS
1. Image dimensions must be800 pixels (width) x 400 pixels (height) and stored externally in a separate image folder. 2. Only use the index.html template for the photo gallery. 3. Use the style.css file to store stylesin a separate CSS folder. 4. Use the image-gallery.js file to store function(s) externally in a separate JavaScript folder. 5. Use // to document your code by providing comments that explain the purpose of all lines of code you write.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Heres an implementation of the photo gallery with HTML CSS and JavaScript files as per your instructions indexhtml DOCTYPE html html langen head meta ...Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started