Take-home Final -- Winter 21
Part C -- Corrected Source Code
----------------------------------
Source code file: index.html
----------------------------------
Problem 2
Problem C1 -- Image Unblur/Blur
----------------------------------
Source code file: styles.css
----------------------------------
/* Problem C1 Source Code -- CSS Style Page */
body { font-family: Arial, Helvetica, sans-serif;
background-color: #FFE0E0; }
img { margin: 5px;
border: 5px solid #000080;
width: 150px; }
----------------------------------
Source code file: source.js
----------------------------------
var unblurImage = function(ev) {
var imageTag = ev.target;
var newFileName = "images/" + imageTag.id + ".jpg";
imageTag.src = newFileName;
}
var blurImage = function(ev) {
var imageTag = ev.target;
var newFileName = "images/" + imageTag.id + "blur.jpg";
imageTag.src = newFileName;
}
var unblurAll = function( ) {
var images = document.getElementsByTagName("img");
for(let imageTag of images) {
var newFileName = "images/" + imageTag.id + ".jpg";
imageTag.src = newFileName;
imageTag.style.borderColor = "red";
}
}
function init( ) {
// Load images
var para = document.getElementById("images");
for(let i = 1; i <= 4; i++) {
let imageCell = document.createElement("img");
imageCell.setAttribute("id", i);
para.appendChild(imageCell);
let imgName = "images/" + i + "blur.jpg";
imageCell.src = imgName;
imageCell.addEventListener("mouseenter", unblurImage);
imageCell.addEventListener("mouseleave", blurImage);
// The next three lines are needed because the
// CSS code doesn't work for dynamically created
// elements.
imageCell.style.margin = "5px";
imageCell.style.border = "5px solid #000080";
imageCell.style.width = "150px";
}
// Attach event handler to button
var button = document.getElementById("btn1");
button.addEventListener("click", unblurAll);
}
window.onload = init;