a3.html code
Plaid Scarf Selector Plaid Scarf Selector
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. Thats quite a compliment.
Rose Mauve
a3.js code
//FUNCTIONS
const $ = function (id) {
return document.getElementById(id);
}
let centerImage = null;
/****Add mouse function here for rollover effect on
the center image****/
const swap = function(evt){
//a.GET CLICKED LINK
const a = this;
//b.GET CAPTION
const caption = $("caption");
//console.log(centerImage);
//console.log(a.getAttribute("href"));
//console.log(a.getAttribute("id"));
//c.CHANGE ENLARGED IMAGE'S SRC/ID TO CLICKED LINK
centerImage.setAttribute("src", a.getAttribute("href"));
//----------------------------------------------------------------
/**You have to enable and edit the following line of code to
make the program work correctly. What do you have to edit?**/
centerImage.setAttribute("id", a.getAttribute("id"));
//----------------------------------------------------------------
//d.CHANGE THE CAPTION TO CLICKED LINK'S TITLE
caption.firstChild.nodeValue = a.getAttribute("title");
//e.CANCEL DEFAULT ACTION OF EVENT
evt.preventDefault();
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL LINKS
const listNode = $("image_list");
const aElements = listNode.getElementsByTagName("a");
//GET THE ENLARGED IMAGE ELEMENT
centerImage = $("images/roseMauve2.jpg");
//PROCESS EACH IMAGE LINK
let imageLink = null;
for ( let i = 0; i < aElements.length; i++ ) {
//1. GET LINK
imageLink = aElements[i];
//2. PRELOAD THE IMAGES THAT WILL APPEAR IN THE CENTER
//AND THE ROLLOVER IMAGES
const image = new Image();
image.setAttribute("src",imageLink.getAttribute("href"));
image.setAttribute("id",imageLink.getAttribute("id"));
//3. ATTACH ALL EVENT HANDLERS TO APPROPRIATE FUNCTIONS
imageLink.onclick = swap;
}//end for loop
}//end onload
a3.css code
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
padding: 20px;
width: 550px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
}
h2 {
font-size: 120%;
padding: .5em 0 .25em;
}
li {
padding-right: 10px;
display: inline;
}
Scarf images
black1.jpg
black2.jpg
harborBlue1.jpg
harborBlue2.jpg
red1.jpg
red2.jpg
roseMauve1. jpg
roseMauve2.jpg
Scarf thumbnails
black.jpg
harborBlue.jpg
red.jpg
roseMauve.jpg.
a3.html code!DOCTYPE HTMLhtml lang=enhead meta c.pdf
1. a3.html code
Plaid Scarf Selector Plaid Scarf Selector
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. Thats quite a compliment.
Rose Mauve
a3.js code
//FUNCTIONS
const $ = function (id) {
return document.getElementById(id);
}
let centerImage = null;
/****Add mouse function here for rollover effect on
the center image****/
const swap = function(evt){
//a.GET CLICKED LINK
const a = this;
//b.GET CAPTION
const caption = $("caption");
//console.log(centerImage);
//console.log(a.getAttribute("href"));
//console.log(a.getAttribute("id"));
//c.CHANGE ENLARGED IMAGE'S SRC/ID TO CLICKED LINK
centerImage.setAttribute("src", a.getAttribute("href"));
//----------------------------------------------------------------
2. /**You have to enable and edit the following line of code to
make the program work correctly. What do you have to edit?**/
centerImage.setAttribute("id", a.getAttribute("id"));
//----------------------------------------------------------------
//d.CHANGE THE CAPTION TO CLICKED LINK'S TITLE
caption.firstChild.nodeValue = a.getAttribute("title");
//e.CANCEL DEFAULT ACTION OF EVENT
evt.preventDefault();
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL LINKS
const listNode = $("image_list");
const aElements = listNode.getElementsByTagName("a");
//GET THE ENLARGED IMAGE ELEMENT
centerImage = $("images/roseMauve2.jpg");
//PROCESS EACH IMAGE LINK
let imageLink = null;
for ( let i = 0; i < aElements.length; i++ ) {
//1. GET LINK
imageLink = aElements[i];
//2. PRELOAD THE IMAGES THAT WILL APPEAR IN THE CENTER
//AND THE ROLLOVER IMAGES
const image = new Image();
image.setAttribute("src",imageLink.getAttribute("href"));
image.setAttribute("id",imageLink.getAttribute("id"));
//3. ATTACH ALL EVENT HANDLERS TO APPROPRIATE FUNCTIONS
imageLink.onclick = swap;
}//end for loop
}//end onload
a3.css code
/* type selectors */
![/**You have to enable and edit the following line of code to
make the program work correctly. What do you have to edit?**/
centerImage.setAttribute("id", a.getAttribute("id"));
//----------------------------------------------------------------
//d.CHANGE THE CAPTION TO CLICKED LINK'S TITLE
caption.firstChild.nodeValue = a.getAttribute("title");
//e.CANCEL DEFAULT ACTION OF EVENT
evt.preventDefault();
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL LINKS
const listNode = $("image_list");
const aElements = listNode.getElementsByTagName("a");
//GET THE ENLARGED IMAGE ELEMENT
centerImage = $("images/roseMauve2.jpg");
//PROCESS EACH IMAGE LINK
let imageLink = null;
for ( let i = 0; i < aElements.length; i++ ) {
//1. GET LINK
imageLink = aElements[i];
//2. PRELOAD THE IMAGES THAT WILL APPEAR IN THE CENTER
//AND THE ROLLOVER IMAGES
const image = new Image();
image.setAttribute("src",imageLink.getAttribute("href"));
image.setAttribute("id",imageLink.getAttribute("id"));
//3. ATTACH ALL EVENT HANDLERS TO APPROPRIATE FUNCTIONS
imageLink.onclick = swap;
}//end for loop
}//end onload
a3.css code
/* type selectors */](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)