Tenía una pregunta sobre el uso del evento mouseover/mouseout en javascript junto con la aplicación de escala de grises a una tabla. La pregunta dice que primero debo hacer una cuadrícula de imágenes (tabla) completamente gris en html. Luego, necesito agregar javascript al html para que cuando pase el mouse sobre la imagen, la imagen se convierta en una imagen en color, y cuando saque el mouse de la imagen, la imagen vuelva a ser una imagen gris. El problema decía que no se permite CSS, por lo que solo se usa javascript y html, si es posible. Muchas gracias de antemano por la ayuda, ¡realmente lo aprecio!
Aquí hay parte de mi código a continuación (las imágenes de la tabla deben comenzar desde la escala de grises, luego aplicar/eliminar la escala de grises cuando se usa el evento mouseover. Hasta ahora, el efecto mouseover solo funciona en la primera imagen. Y tampoco sé cómo aplique primero un filtro de escala de grises sobre toda la tabla).
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>Yo personalmente sugeriría lo siguiente:
// 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>Referencias:
id debe ser único.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>