[Solved]Dynamic Images Events Dom Seen Question Couple Times Answers Complete Could Comments Also Q37274001
Dynamic Images, Events, and theDOM
I have seen this question a couple oftimes, but the answers are not complete.
Could comments also please be includedso that it is easier to understand what the code is doing.
Overview
Images, both static and dynamic, appear on most Web sites. Thereare many different features and functionalities that we can addthrough the use of JavaScript, including preloading, rollovers, andcycling banner ads. In this assignment, you will work withJavaScript, images, events, and manipulating the DOM to create aninteractive image gallery.
Hint: Preloading your images will only work on a hostingserver and not your local drive, as there is no load time for yourimages locally. Once you have preloaded those images, you shouldclear your cache to test your loading of the images again.
Tip: In a smaller JavaScript program such as this one, eachfunction is created for a specific purpose. However, in morecomplex sites, it is better to build functions that are applicableto multiple situations. For example, rather than specifying anelement name or ID, we can use a variable that is passed into thefunction.
Directions
Use the gallery.html and index.html files from the suppliedcourse Zip file. Create functionality using JavaScript on thefollowing pages:
index.html
- Preload the images (banner1.jpg, banner2.jpg, and banner3.jpgin the images folder) for the banner at the top of the page.
- Create a cycling two-state banner that cycles every threeseconds.
gallery.html
- Preload the gallery images.
- Create roll-over functionality for each of the thumbnails inyour image gallery. Use appropriate images found in the imagesfolder.
- Write developer comments to describe the variables beingdeclared and explain the functions and logical blocks of JavaScriptcode pertaining to the gallery.
Make sure to do the following:
- Create an onpageload function to preload all of yourimages.
- Create a modularized function to cycle the homepagebanner.
- Create a modularized rollover function for gallery images.
- Once completed, view your pages in each of your two selectedWeb browsers to see if the content renders appropriately andconsistently within each. Next, verify that your code is error freeusing the appropriate browser specific development tool found inthe Resources.
- Take a screen capture of each of your validation results andsave it for submission.
Note: Modularized refers to creatingcomponents that can be repurposed without significant changes tocoding. Modularized components have no “hard coding” of imagenames, URLs, and so on, in the functions. Samples of modularizedand nonmodularized JavaScript are provided in the Example Code filelinked in Resources.
Index.html
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>InvitationPage</title>
<link rel=”stylesheet” type=”text/css”href=”css/main.css” />
<script type=”text/javascript”src=”js/index.js”></script>
</head>
<body>
<header>
<divclass=”top”>
<a class=”logo” href=”index.html”>CapellaVolunteers<spanclass=”dotcom”>.org</span></a>
</div>
<nav>
<ul class=”topnav”>
<li><a href=”index.html”class=”active”>Home</a>
</li>
<li><ahref=”invitation.html”>Invitation</a>
</li>
<li><a href=”volunteer.html”>Volunteers</a>
</li>
<li><a href=”gallery.html”>Gallery</a>
</li>
<li><ahref=”registration.html”>Registration</a>
</li>
</ul>
</nav>
</header>
<section id=”bannerImages”>
Banner Images<br/>
<img src=”images/banner1.jpg” id=”banner”alt=”Banner”/>
<img src=”images/banner2.jpg” id=”banner”alt=”Banner”/>
<img src=”images/banner3.jpg” id=”banner”alt=”Banner”/>
</section>
<footer>This events site is for IT3515tasks.
</footer>
</body>
</html>
gallery.html
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>InvitationPage</title>
<link rel=”stylesheet” type=”text/css”href=”css/main.css” />
</head>
<body>
<header>
<divclass=”top”>
<a class=”logo” href=”index.html”>CapellaVolunteers<spanclass=”dotcom”>.org</span></a>
</div>
<nav>
<ul class=”topnav”>
<li><a href=”index.html”>Home</a>
</li>
<li><a href=”invitation.html”>Invitation</a>
</li>
<li><a href=”volunteer.html”>Volunteers</a>
</li>
<li><a href=”gallery.html”class=”active”>Gallery</a>
</li>
<li><ahref=”registration.html”>Registration</a>
</li>
</ul>
</nav>
</header>
<section id=”gallery”>
<div class=”gallery”>
<a target=”_blank” href=”images/firefighter.jpg”>
<img src=”images/firefighter.jpg”alt=”firefighter” width=”300″ height=”200″>
</a>
<div class=”desc”>Add a description of the imagehere</div>
</div>
<div class=”gallery”>
<a target=”_blank” href=”images/work.jpg”>
<img src=”images/work.jpg” alt=”work”width=”300″ height=”200″>
</a>
<div class=”desc”>Add a description of the imagehere</div>
</div>
<div class=”gallery”>
<a target=”_blank” href=”images/silhouette.jpg”>
<img src=”images/silhouette.jpg”alt=”silhouette” width=”300″ height=”200″>
</a>
<div class=”desc”>Add a description of the imagehere</div>
</div>
<div class=”gallery”>
<a target=”_blank” href=”images/event.jpg”>
<img src=”images/event.jpg” alt=”event”width=”300″ height=”200″>
</a>
<div class=”desc”>Add a description of the imagehere</div>
</div>
</section>
<footer>This events site is for IT3515tasks.
</footer>
</body>
</html>
Expert Answer
Answer to Dynamic Images, Events, and the DOM I have seen this question a couple of times, but the answers are not complete. Could… . . .
OR
