Lab 9
Attached Files:
lab9.zip (440.781 KB)
Objectives:
Create a photo gallery
Create an animated navigation bar
Description:
In lab 9, we will be creating a page with a photo gallery and an animated navigation bar. The html and images have been provided in the attached file. For the photo gallery, you will write the script to allow a user to click on a thumbnail image and have it display as the large photo on the page. You will also add code to highlight the thumbnail images with styles when they hover over each one. For the navigation bar, you will be using a plugin to create dropdown menus for sub-items in the main menu.
Requirements:
For this lab, you will be working with the mums.html page attached to this assignment.
At the bottom of the page is a div called gallery. It includes a large image and 5 smaller thumbnail images. You will covert this section into a working photo gallery:
Add a hover effect to each of the smaller images to add a thin dark green border and box shadow when hovering over the image and remove it when you move off the image.
Add a click event to each of the smaller images to replace the src attribute of the larger image with the src attribute from the clicked image. Then take the alternate text from the small image and use it to replace the text under the large image.
Create an animated navigation bar for the links in the nav section of the page.
Download the smartmenus jQuery plugin
Modify the HTML and JavaScript to create the navigation bar.
Upload your files to the server. Test and submit the assignment.
Lab Requirement
Point Value
Create rollovers for all the thumbnail images
20 points
Create a click event to display the thumbnail images in the larger image along with their title
25 points
Convert the nav section into an animated menu using the jQuery SmartMenus plugin
25 points
Page displays and script executes according to specification on the server
5 points
Total:
75 points
“Place your order now for a similar assignment and have exceptional work written by our team of experts, guaranteeing you A results.”
Attachments
20190412171939lab9 (441 kB)
