Directions Use the gallery.html and index.html files from the supplied course Zi

ID: 3744012 • Letter: D

Question

Directions

Use the gallery.html and index.html files from the supplied course Zip file. Create functionality using JavaScript on the following pages:

index.html

Preload the images (banner1.jpg, banner2.jpg, and banner3.jpg in the images folder) for the banner at the top of the page.

Create a cycling two-state banner that cycles every three seconds.

gallery.html

Preload the gallery images.

Create roll-over functionality for each of the thumbnails in your image gallery. Use appropriate images found in the images folder.

Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery.

Make sure to do the following:

Create an onpageload function to preload all of your images.

Create a modularized function to cycle the homepage banner.

Create a modularized rollover function for gallery images.

Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error free using the appropriate browser specific development tool found in the Resources.

Take a screen capture of each of your validation results and save it for submission.

Note: Modularized refers to creating components that can be repurposed without significant changes to coding. Modularized components have no "hard coding" of image names, URLs, and so on, in the functions. Samples of modularized and nonmodularized JavaScript are provided in the Example Code file linked in Resources.

here is the main:

body {
font: 15px arial, sans-serif;
color: #808080;
}
input[type=text],
select ,input[type=password],radio{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] ,input[type=button]{
width: 100%;
background-color: #800D1E;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover ;input[type=button]:hover {
background-color: #802F1E;
}
section {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
article {
border-radius: 5px;
background-color: #CCCCCC;
padding: 20px;
color: #222222;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #CCCCCC;
color: #333
}
ul.topnav li.right {
float: right;
}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
.top {
position: relative;
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
z-index: 2;
}
.logo {
font-family: arial;
text-decoration: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 37px;
letter-spacing: 3px;
color: #555555;
display: block;
position: absolute;
top: 17px;
}
.logo .dotcom {
color: #800D1E
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
}
.top .logo {
position: relative;
top: 0;
width: 100%;
text-align: left;
margin: auto
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}

here is the index.html:

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

</li>

<li><a href="invitation.html">Invitation</a>

</li>

<li><a href="volunteer.html">Volunteers</a>

</li>

<li><a href="gallery.html">Gallery</a>

</li>

<li><a href="registration.html">Registration</a>

</li>

</ul>

</nav>

</header>

Banner Images<br/>

</section>

<footer>This events site is for IT3515 tasks.

</footer>

</body>

</html>

here is the gallery.html

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

</head>

can someone help me I am running out of time.

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

</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><a href="registration.html">Registration</a>

</li>

</ul>

</nav>

</header>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</section>

<footer>This events site is for IT3515 tasks.

</footer>

</body>

</html>

Explanation / Answer

I have changed some properties of desc class in main.css. Can you change the background of desc on your own so that it is an opaque colour?

main.css

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
position: absolute;
opacity: 0;
top: 50%;
transform: translateY(-50%);
}

index.html

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

</li>

<li><a href="invitation.html">Invitation</a>

</li>

<li><a href="volunteer.html">Volunteers</a>

</li>

<li><a href="gallery.html">Gallery</a>

</li>

<li><a href="registration.html">Registration</a>

</li>

</ul>

</nav>

</header>

Banner Images<br/>

</section>

<footer>This events site is for IT3515 tasks.

</footer>

</body>

var imgs = document.images;

var len = imgs.length;

var counter = 0;

var bannerIndex = 0;

function onpageload() {

[].forEach.call( imgs, function( img ) {

console.log("Hello");

img.addEventListener( 'load', incrementCounter, false );

} );

}

function incrementCounter() {

counter++;

if ( counter === len ) {

console.log( 'All images loaded!' );

console.log(imgs[bannerIndex]);

cycleBanner(bannerIndex);

setInterval( function() {

cycleBanner(bannerIndex);

}, 3000);

}

function cycleBanner(n) {

var i;

for (i = 0; i < len; i++) {

imgs[i].style.display = "none";

}

imgs[bannerIndex].style.display = "block";

bannerIndex = (bannerIndex + 1) % len;

}

onpageload();

</script>

</html>

gallery.html

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

function MouseRollover(MyImage) {

// Add an opaque background to the desc element on your own

// It will appear as a roll over

MyImage.childNodes[3].style.opacity = 1;

}

function MouseOut(MyImage) {

MyImage.childNodes[3].style.opacity = 0;

}

</script>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

</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><a href="registration.html">Registration</a>

</li>

</ul>

</nav>

</header>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</section>

<footer>This events site is for IT3515 tasks.

</footer>

</body>

</html>

Navigate

Directions This program will do the same that Assignment 4 did (assignment 4 bel

Directions Use the rating scale below to provide a rating of the following categ

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Directions Use the gallery.html and index.html files from the supplied course Zi

Question

Explanation / Answer

Related Questions

Navigate