I had a question about using the mouseover / mouseout event in javascript along with applying grayscale to a table. The question says that I must first making an image grid (table) all gray in html. Then I need to add javascript to the html so that when I mouse over the image, the image turns into a colored image, and when I mouse out from the image, the image reverts back into a gray image. The problem said no CSS is allowed, so only using javascript and html, if possible. Thank you so much in advance for the help, I really appreciate it!
Here is some of my code below (the table images need to start from grayscale, then apply/remove the grayscale when using the mouseover event. So far the mouseover effect only works on the first image. And I also don't know how to apply a grayscale filter over the whole table first).
function image_grayscale() {
document.getElementById("image").style.filter = "grayscale(100%)";
}
function remove_grayscale() {
document.getElementById("image").style.filter = "grayscale(0%)";
}<div class="table">
<table border="3" align=center width="600" height="200">
<tr style="width:1" ;style="height:10%" ; bgcolor="white">
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" style="grayscale" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
</tr>
</table>I'd personally suggest the following:
// define the function as a constant, using Arrow syntax;
// here we take the Event Object ('evt', passed from the (later)
// use of EventTarget.addEventListener(). From the Event-Object
// we retrieve the element to which the function was bound
// (evt.currentTarget), and update its CSSStyleDeclaration
// for the filter() function.
// We use a template-literal string (delimited with back-ticks
// to interpolate the JavaScript into the string, using the
// ${JavaScript here} notation.
// Based on the event-type we return the arguments of either
// 0 or 1; if the evt.type is exactly 'mouseenter' 0 is
// returned from the conditional operator, otherwise 1 is
// returned:
const toggleGrayscale = (evt) => evt.currentTarget.style.filter = `grayscale( ${evt.type === 'mouseenter' ? 0 : 1} )`,
// here we retrieve a NodeList of all <img> elements within the document:
images = document.querySelectorAll('img');
// we iterate over the NodeList of images to set them to
// grayscale(), initially:
images.forEach(
(img) => img.style.filter = "grayscale(1)"
);
// we iterate again (as Array.prototype.forEach() has no
// return value; here we use EventTarget.addEventListener()
// to bind the toggleGrayscale function for both the
// 'mouseenter' and 'mouseleave' events:
images.forEach(
(img) => {
img.addEventListener('mouseenter', toggleGrayscale)
img.addEventListener('mouseleave', toggleGrayscale)
});*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}<div class="table">
<table>
<tr>
<td>
<!-- I removed the size/width attributes since they don't seem to be useful, use CSS;
also duplicate ids are invalid, an id must be unique within the document:-->
<img src="https://placeimg.com/200/200/animals">
</td>
<td>
<img src="https://placeimg.com/200/200/architecture">
</td>
<td>
<img src="https://placeimg.com/200/200/nature">
</td>
<td>
<img src="https://placeimg.com/200/200/people">
</td>
<td>
<img src="https://placeimg.com/200/200/tech">
</td>
</table>References:
id attribute must be unique.onmouseover.let table = document.getElementById('greyscaleTable')
table.addEventListener('mouseover', remove_grayscale);
table.addEventListener('mouseout', image_grayscale);
function image_grayscale(event) {
let element = event.target;
changeGrayscale('100%', element);
}
function remove_grayscale(event) {
let element = event.target;
changeGrayscale('0%', element);
}
function changeGrayscale(amount, element) {
let isGrayscaleImage = element.classList.contains('grayscale');
if (isGrayscaleImage) {
element.style.filter = `grayscale(${amount})`;
}
}#greyscaleTable img {
width: 100px;
height: 100px;
}<div id="greyscaleTable" class="table">
<table border="3" align=center width="600" height="200">
<tr>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
</tr>
</table>