Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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 ... blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Cost Management A Strategic Emphasis

Authors: Edward Blocher, David Stout, Paul Juras, Gary Cokins

6th Edition

78025532, 978-0077523732, 77523733, 978-0078025532

More Books

Students also viewed these Programming questions

Question

Give eye contact, but do not stare.

Answered: 1 week ago

Question

When should you avoid using exhaust brake select all that apply

Answered: 1 week ago

Question

Calculate the missing amounts for each of the following firms

Answered: 1 week ago