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

Question

我有一个关于在 javascript 中使用鼠标悬停/鼠标移出事件以及将灰度应用于 table 的问题。问题说我必须首先在 html 中制作一个全灰的图像网格 (table)。然后我需要将 javascript 添加到 html 以便当我将鼠标悬停在图像上时，图像变成彩色图像，当我从图像上移开鼠标时，图像恢复为灰色图片。 问题说不允许 CSS，所以尽可能只使用 javascript 和 html。 非常感谢您的帮助，非常感谢！

下面是我的一些代码（table图像需要从灰度开始，然后apply/remove使用鼠标悬停事件时的灰度。到目前为止，鼠标悬停效果仅适用于第一个图片。而且我也不知道如何首先在整个 table 上应用灰度滤镜）。

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

我个人建议如下：

// 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>

参考文献：

Answer 2

id 属性必须是唯一的。
不要把 HTML 弄得乱七八糟。应该很容易读懂。
使用 addEventListener 而不是 onmouseover。
方法名一般写成kebabCase（见我新增的方法）
不要重复代码。相反，将类似代码重构为新方法。

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>

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

HTML with Javascript - Apply grayscale to images in a table, then mouseover images to go back to colored version

html

javascript

onmouseover

onmouseout

grayscale