<!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 deal.
That’s quite a compliment.
</p><br>
<ul id="image_list">
<li><a href="images/roseMauve1.jpg"
title="Rose Mauve" id="roseMauve2.jpg">
<img
src="thumbnails/roseMauve.jpg"
alt=""></a></li>
<li><a href="images/black1.jpg" title="Black"
id = "black2.jpg">
<img src="thumbnails/black.jpg"
alt=""></a></li>
<li><a href="images/red1.jpg" title="Red" id
= "red2.jpg">
<img src="thumbnails/red.jpg"
alt=""></a></li>
<li><a href="images/harborBlue1.jpg"
title="Harbor Blue" id="harborBlue2.jpg">
<img
src="thumbnails/harborBlue.jpg"
alt=""></a></li>
</ul>
<h2 id="caption">Rose Mauve</h2>
<p><img src="images/roseMauve1.jpg" alt=""
id="images/roseMauve2.jpg"></p>
</section>
</body>
</html>
js file:
//FUNCTIONS
var $ = function (id) {
return
document.getElementById(id);
}
var imageNode;
/****Add mouse functions here. Code from rollover.js will be useful here****/
var swap = function(evt){
//a.GET CLICKED LINK (<a>
tag)
var link = this;
//b.GET CAPTION
var captionNode =
$("caption");
//c.CHANGE ENLARGED IMAGE'S SRC/ID
TO CLICKED LINK
imageNode.setAttribute("src",
link.getAttribute("href"));
//d.CHANGE THE CAPTION TO
CLICKED LINK'S TITLE
captionNode.firstChild.nodeValue =
link.getAttribute("title");
//e.CANCEL DEFAULT ACTION OF
EVENT
if (!evt) { evt = window.event;
}
if ( evt.preventDefault ) {
evt.preventDefault(); }
else {
evt.returnValue
= false;
}
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL LINKS (<a>
tags)
var listNode =
$("image_list");
var imageLinks =
listNode.getElementsByTagName("a");
//GET ENLARGED IMAGE IN THE
CENTER
imageNode =
$("images/roseMauve2.jpg");
//PROCESS EACH IMAGE LINK
var i, imgLink, image;
for ( i = 0; i <
imageLinks.length; i++ ) {
//1. GET
LINK
imgLink =
imageLinks[i];
//2. PRELOAD
IMAGE
image = new
Image();
image.setAttribute("src",imgLink.getAttribute("href"));
//3. ATTACH ALL
EVENT HANDLERS TO APPROPRIATE FUNCTIONS
imgLink.onclick
= swap;
}//end for loop
}//end onload
Homework Answers
Request Answer!
We need at least 10 more requests to produce the answer.
0 / 10 have requested this problem solution
The more requests, the faster the answer.
Add Answer to:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plaid Scarf Selector</title>
<link rel="stylesheet" href="a3.css" />...
I am trying to create a slide show using JavaScript. This is what I have so...
I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...
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...
Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO:...
Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO: Change The Title</title> </head> <body> <h1></h1> <p>First paragraph.</p> <p class="intro">Second <span>paragraph</span>.</p> <button id="start">Start</button> <main> </main> <!-- Test 6: DOM Programming You MAY consult the notes for week 7, but you MAY NOT discuss this test or your code with any other students. All work must be your own. Instructions: 1. Put all solution code in a file named solution.js. When you upload your solution to...
<!-- 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:...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...
Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
Code for the movies page:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
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...
6. (HTML) Given the following HTML document: <html> <head> <title>Grandma Cafe</title> </head> <body> <h1>Menu</h1> <ol> <li>Café...
6. (HTML) Given the following HTML document: <html> <head> <title>Grandma Cafe</title> </head> <body> <h1>Menu</h1> <ol> <li>Café Latte</li> <li>Café Mocha</li> <li>Cappuccino</li> </ol> <img src="https://businessexchange.ca/wp-content/uploads/2018/05/coffee- shop-1.jpg" /> </body> </html> a. [4] Sketch approximately how it will be displayed in a web browser. (For media items such as images, just draw a box labelled with the media type.) b. [2] What is the protocol, hostname, top-level domain name, and file name of the image being linked here?
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date: Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...
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...
Code for the movies page:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
6. (HTML) Given the following HTML document: <html> <head> <title>Grandma Cafe</title> </head> <body> <h1>Menu</h1> <ol> <li>Café Latte</li> <li>Café Mocha</li> <li>Cappuccino</li> </ol> <img src="https://businessexchange.ca/wp-content/uploads/2018/05/coffee- shop-1.jpg" /> </body> </html> a. [4] Sketch approximately how it will be displayed in a web browser. (For media items such as images, just draw a box labelled with the media type.) b. [2] What is the protocol, hostname, top-level domain name, and file name of the image being linked here?
Most questions answered within 3 hours.
-
A 2.0 μF parallel-plate air-filled capacitor is connected
across a 10 V battery.
(a) Determine the...
asked 1 minute from now -
ECO
2013 &
asked 2 minutes ago -
Insight refers to:
a.
Adaptive decision-making
b.
Credibility and trustworthness
c.
Understanding of one's problems
d....
asked 8 minutes ago -
Explain the differences between rights and permissions within
Windows. Define the principle of least privilege and...
asked 16 minutes ago -
A solid, frictionless cylindrical reel of mass M=5.00kg and
radius R=0.55m is used to draw water...
asked 18 minutes ago -
how do radio waves get emitted from Jupiter?
- do they come from radiation from planet...
asked 19 minutes ago -
The test statistic used in the F test for the equality of two
variances is calculated...
asked 30 minutes ago -
How does neutralisation of IL-6 trans-signaling affect the
autoimmune disease and inflammation? What if the trans-signaling...
asked 20 minutes ago -
f an allele is 'fixed' in a population, what is its
frequency?
0.50
0.75
0.25
0...
asked 35 minutes ago -
Do we have a duty of national loyalty in business? What is the
major argument in...
asked 35 minutes ago -
compare the international treatment of segment reporting to the
us gaap treatment
asked 31 minutes ago -
A statistics student finds herself struggling with a newspaper
article stating that only eighteen percent of...
asked 1 hour ago