HTML 和 Javascript - 将灰度应用于表格中的图像，然后将鼠标悬停在图像上 go 返回彩色版本

Question

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>

Answer 1

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:

• Arrow functions .
• CSSStyleDeclaration .
• EventTarget.addEventListener() .
• NodeList.prototype.forEach() .

Answer 2

1. An id attribute must be unique.
2. Don't clutter the HTML more than necessary. It should be really easy to read.
3. Use addEventListener instead of onmouseover .
4. Method names are usually written with kebabCase (see the new method I added).
5. Don't repeat code. Instead, refactor similar code into a new method.

 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>