I know there are a couple of answers to this question already but they don't match...
I know there are a couple of answers to this question already but they don't match the sample code we where given.
Overview
Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery.
Hint: Preloading your images will only work on a hosting server and not your local drive, as there is no load time for your images locally. Once you have preloaded those images, you should clear your cache to test your loading of the images again.
Tip: In a smaller JavaScript program such as this one, each function is created for a specific purpose. However, in more complex sites, it is better to build functions that are applicable to multiple situations. For example, rather than specifying an element name or ID, we can use a variable that is passed into the function.
Directions
Use the gallery.html and index.html files from the supplied course Zip file. Create functionality using JavaScript on the following pages:
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.
Here is the sample code:
Modularized code:
function setupRollover(theImage) {
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.onmouseout = function() {
this.src = this.outImage.src;
}
theImage.overImage = new Image();
theImage.overImage.src = "images/" + theImage.id + "_on.gif";
theImage.onmouseover = function() {
this.src = this.overImage.src;
}
}
Image myImage = document.images.namedItem("capellaimage");
Image myImage2 = document.images.namedItem("capellaimage2");
setupRollover(myImage);
setupRollover(myImage2);
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css"
/>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="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><a
href="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 image
here</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 image
here</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 image
here</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 image
here</div>
</div>
</section>
<footer>This events site is for IT3515 tasks.
</footer>
</body>
</html>
I can hard code the HTML file and get it to work but I need to modularized the code and have no idea how to get it to work.
I appreciate any help I can get.
Homework Answers
Add Answer to:
I know there are a couple of answers to this question already
but they don't match...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
Kindly assist in fixing the error i got when I pasted my codes to validate it....
Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English--> <head> <meta charset="utf-8"/> <title>DA Website</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="wrapper"> <!-- start html...
Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm...
Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm trying to figure out how to get the 'planned stadium' photo to be shifted to the right and parallel to the 'Ground View 2018' picture. Below is the attached code and thanks for your help: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="author" content="Ian Kusnadi" /> <title>Tottenham Spurs Fan Page</title> </head> <style type="text/css"> a:link...
Hello! I am to create a .js file that allows the paragraph on the bottom of...
Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...
image_gallery.js: $(document).ready(function() { $("#image_list a").each(function() { // get the image URL and caption for each...
image_gallery.js:
$(document).ready(function() {
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
// preload the image for each link
var galleryImage = new
Image();
galleryImage.src = imageURL;
// set up the event handlers for
each link
$(this).click(function(evt) {
$("#image").attr("src", imageURL);
$("#caption").text(caption);
// cancel...
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Plaid Scarf Selector</title> <link rel="stylesheet" href="a3.css" />...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plaid Scarf Selector</title>
<link rel="stylesheet" href="a3.css" />
<script src="a3.js"> </script>
</head>
<body>
<section>
<h1> Plaid Scarf Selector
</h1><br>
<p>Feels close to real
cashmere (but costs a lot less).
Think of this scarf as the next
best thing to wearing authentic cashmere.
Its microsueded fabric really is
that soft. In fact, at first touch some
mistake if for the real...
Please edit and add all the code needed to make the images side by side and to put the buttons in...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head tag --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title> </head> <!-- body tag --> <body> <style> .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; ...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head tag --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Social</title> </head> <!-- body tag --> <body> <style> .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; background-color:...
div <h3 class-"fancy"> Hi </h3> cul> <li>Location 1 </li>cli> Location 2</li</ul p id-greeting"> Hello </p> p>...
div <h3 class-"fancy"> Hi </h3> cul> <li>Location 1 </li>cli> Location 2</li</ul p id-greeting"> Hello </p> p> Welcome to <span> Pizza City </span>lp> <div id- "food" class-"fancy"> Here is our menu <h3> Pizzas </h3> <ul> <li>Pepperoni </li><li> Cheese </li/ul> <h3> Sandwiches </h3> ul> li>Philly/libclis Italian</lis <luls /div> </div> Write the javascript code (one line of code) to achieve the following for the HTML above. The HTML will not be modified. Write the javascript code (1 line) to change the background color...
image_gallery.js:
$(document).ready(function() {
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
// preload the image for each link
var galleryImage = new
Image();
galleryImage.src = imageURL;
// set up the event handlers for
each link
$(this).click(function(evt) {
$("#image").attr("src", imageURL);
$("#caption").text(caption);
// cancel...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plaid Scarf Selector</title>
<link rel="stylesheet" href="a3.css" />
<script src="a3.js"> </script>
</head>
<body>
<section>
<h1> Plaid Scarf Selector
</h1><br>
<p>Feels close to real
cashmere (but costs a lot less).
Think of this scarf as the next
best thing to wearing authentic cashmere.
Its microsueded fabric really is
that soft. In fact, at first touch some
mistake if for the real...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
div <h3 class-"fancy"> Hi </h3> cul> <li>Location 1 </li>cli> Location 2</li</ul p id-greeting"> Hello </p> p> Welcome to <span> Pizza City </span>lp> <div id- "food" class-"fancy"> Here is our menu <h3> Pizzas </h3> <ul> <li>Pepperoni </li><li> Cheese </li/ul> <h3> Sandwiches </h3> ul> li>Philly/libclis Italian</lis <luls /div> </div> Write the javascript code (one line of code) to achieve the following for the HTML above. The HTML will not be modified. Write the javascript code (1 line) to change the background color...
Most questions answered within 3 hours.
-
The energy required to remove an electron from a surface of a
solid element is called...
asked 40 minutes ago -
How would you train your employees to avoid risks of using
mobile devices?
asked 1 hour ago -
Assume Kw = 1.01 ✕ 10−14
For pure water, we can calculate [H3O+ ] = [OH...
asked 1 hour ago -
Suppose that on a temperature scale X, water boils at 203.0°X
and freezes at -105.7°X. What...
asked 2 hours ago -
BaS crystallizes in a cubic unit cell with S2- ions on each
corner and each face....
asked 3 hours ago -
A. 0≤P(Oi)≤10≤P(Oi)≤1 for each i
B. P(Oi)≤0P(Oi)≤0
C. P(Oi)=1+P(OCi)P(Oi)=1+P(OiC)
D. P(Oi)≥1P(Oi)≥1
If an experiment consists of...
asked 4 hours ago -
A battery has an emf of 9.20V and an internal resistance of 1.20
ohm. a)What resistance...
asked 4 hours ago -
The area of an elastic circular loop decreases at a constant
rate, dA/dt = −6.60×10−3 m2/s...
asked 5 hours ago -
The denaturation of proteins can be described by the
equilibrium
F⇌U
where F and U represent...
asked 7 hours ago -
Please answer what the maximum and minimum force is, and the
angle on the ion is...
asked 7 hours ago -
implement a program that reads a number of rows and a symbol.
The program will draw...
asked 7 hours ago -
Assume that when adults with smartphones are randomly selected,
45% use them in meetings or classes....
asked 7 hours ago