In this problem, you will write a small piece of JavaScript such that every imag
ID: 3739296 • Letter: I
Question
In this problem, you will write a small piece of JavaScript such that every image can be
hovered on to see a larger thumbnail as needed. (Figure1)
INSTRUCTIONS
1. Begin by adding a link to a JavaScript file, named “lab9_problem1.js ”, at the <head> section of your page.
2. Modify the “lab9_problem1.html" to add a class for each thumbnail image.
3. In your JavaScript file, write a loop to find all <img> tags with the newly defined class (hint: querySelectorAll() ).
4. For each image, attach a listener on the mouseOver event to create a new <span> with a larger image inside (based on the “src” attribute). Add another listener on the mouseOut event to hide the newly created <span> .
5. All required resources are in “images” folder.
HTML CODE
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Lab 9 - Problem 1</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="lab9_problem1.css" />
<script type="text/javascript" src="lab9_problem1.js"></script>
</head>
<body>
<form method="get" action="">
<div id="searchBox">
<input type="search" name="search" placeholder="Search titles" /><input type="submit" value="Search" />
</div>
<div id="settingsBox">
<select name="actions">
<option value="0">Actions</option>
<option value="1">Archive</option>
<option value="2">Delete</option>
</select>
<input type="submit" value="Apply" />
<select name="filter">
<option value="0">Genre</option>
<option value="1">Baroque</option>
<option value="2">Mannerism</option>
<option value="3">Neo-Classicism</option>
<option value="4">Realism</option>
<option value="5">Romanticism</option>
</select>
<input type="submit" value="Filter" />
</div>
<div id="artistBox">
<table>
<caption>Paintings</caption>
<thead>
<tr>
<th colspan="2"></th>
<th scope="col">Title</th>
<th scope="col">Artist</th>
<th scope="col">Year</th>
<th scope="col">Genre</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="index[]" value="10" /></td>
<td><img src="images/art/thumbs/05030.jpg" class="" alt="Death of Marat" /></td>
<td><em>Death of Marat</em></td>
<td>David, Jacques-Louis </td>
<td>1793</td>
<td>Romanticism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="20"/></td>
<td><img src="images/art/thumbs/12010.jpg" class="" alt="Portrait of Eleanor of Toledo" /></td>
<td><em>Portrait of Eleanor of Toledo</em></td>
<td>Bronzino, Agnolo </td>
<td>1545</td>
<td>Mannerism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="30"/></td>
<td><img src="images/art/thumbs/07020.jpg" class="" alt="Liberty Leading the People" /></td>
<td><em>Liberty Leading the People</em></td>
<td>Delacroix, Eugene </td>
<td>1830</td>
<td>Romanticism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="40"/></td>
<td><img src="images/art/thumbs/13030.jpg" class="" alt="Arrangement in Grey and Black" /></td>
<td><em>Arrangement in Grey and Black</em></td>
<td>Whistler, James Abbott </td>
<td>1871</td>
<td>Realism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="50"/></td>
<td><img src="images/art/thumbs/06010.jpg" class="" alt="Mademoiselle Caroline Riviere" /></td>
<td><em>Mademoiselle Caroline Riviere</em></td>
<td>Ingres, Jean-Auguste</td>
<td>1806</td>
<td>Neo-Classicism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
CSS CODE
/* general text formatting */
h1, h2, h3, nav, footer {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
body {
font-family: "Lucida Sans", Verdana, Arial, sans-serif;
font-size: 80%;
}
div#searchBox, div#settingsBox, div#artistBox {
margin: 0.25em auto;
background-color: #EBF4FB;
padding: 1em;
border: 1pt solid #95BEF0;
width: 80%;
}
div#searchBox { margin-top: 1em; }
div#artistBox {
margin-top: 1em;
background-color: #FAFCFF;
}
table {
border: collapse;
border-spacing: 0;
}
table tbody td{
border-top: 1pt solid #95BEF0;
line-height: 1.5em;
vertical-align: middle;
padding: 0.5em 0.75em;
}
table thead th {
text-align: left;
padding: 0.25em 0.75em;
}
table thead {
background-color: #EBF4FB ;
}
table tbody td:first-child {
text-align: center;
padding: 0.5em 0em;
}
caption {
background-color: #95BEF0;
padding: 0.5em 0.5em;
font-weight: bold;
font-size: 1.2em;
}
.bigImg{
position:absolute;
border: solid 10px black;
margin:10px;
background-color:#FFFFFF;
padding:10px;
}
IMAGES
05030.jpg
06010.jpg
07020.jpg
12010.jpg
13030.jpg
There is also another set of the same photos but larger.
Explanation / Answer
Hi.. I have written javascript for the above.
Lab9.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Lab 9 - Problem 1</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="lab9_problem1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="get" action="">
<div id="searchBox">
<input type="search" name="search" placeholder="Search titles" /><input type="submit" value="Search" />
</div>
<div id="settingsBox">
<select name="actions">
<option value="0">Actions</option>
<option value="1">Archive</option>
<option value="2">Delete</option>
</select>
<input type="submit" value="Apply" />
<select name="filter">
<option value="0">Genre</option>
<option value="1">Baroque</option>
<option value="2">Mannerism</option>
<option value="3">Neo-Classicism</option>
<option value="4">Realism</option>
<option value="5">Romanticism</option>
</select>
<input type="submit" value="Filter" />
</div>
<div id="artistBox">
<table>
<caption>Paintings</caption>
<thead>
<tr>
<th colspan="2"></th>
<th scope="col">Title</th>
<th scope="col">Artist</th>
<th scope="col">Year</th>
<th scope="col">Genre</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="index[]" value="10" /></td>
<td><img src="images/art/thumbs/05030.jpg" class="abc" alt="Death of Marat" /></td>
<td><em>Death of Marat</em></td>
<td>David, Jacques-Louis </td>
<td>1793</td>
<td>Romanticism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="20"/></td>
<td><img src="images/art/thumbs/12010.jpg" class="abc" alt="Portrait of Eleanor of Toledo" /></td>
<td><em>Portrait of Eleanor of Toledo</em></td>
<td>Bronzino, Agnolo </td>
<td>1545</td>
<td>Mannerism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="30"/></td>
<td><img src="images/art/thumbs/07020.jpg" class="abc" alt="Liberty Leading the People" /></td>
<td><em>Liberty Leading the People</em></td>
<td>Delacroix, Eugene </td>
<td>1830</td>
<td>Romanticism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="40"/></td>
<td><img src="images/art/thumbs/13030.jpg" class="abc" alt="Arrangement in Grey and Black" /></td>
<td><em>Arrangement in Grey and Black</em></td>
<td>Whistler, James Abbott </td>
<td>1871</td>
<td>Realism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" name="index[]" value="50"/></td>
<td><img src="images/art/thumbs/06010.jpg" class="abc" alt="Mademoiselle Caroline Riviere" /></td>
<td><em>Mademoiselle Caroline Riviere</em></td>
<td>Ingres, Jean-Auguste</td>
<td>1806</td>
<td>Neo-Classicism</td>
<td><button><a href="#"><img src="images/edit16.png" alt="" /> Edit</a></td>
</tr>
</tbody>
</table>
</div>
</form>
<script type="text/javascript" src="lab9_problem1.js"></script>
</body>
</html>
Lab9_problem1.js
$( document ).ready(function() {
console.log( "ready!" );
var elementsL = document.getElementById("artistBox").querySelectorAll(".abc");
//alert(elementsL[0].src);
for(var i=0;i<elementsL.length;i++){
var src = elementsL[i].src;
elementsL[i].onmouseover = function() {
$(elementsL[i]).insertAfter("<span id='1'><img src=""+src+"" height=200 width=200 />abcddd</span>");
//elementsL[i].innerHTML = "<span id='1'><img src=""+src+"" height=200 width=200></span>";
};
elementsL[i].onmouseout = function() {
$( "div" ).remove( "#1" );
};
}
});
Please check the code and let me know any issues. Thank you. All the best.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.