Necesito hacer una función cuando hago clic en la casilla de verificación. Puedo ver el nombre de la imagen (Alt="bla bla") cuando el mouse se desplaza sobre la imagen. Agradezco la ayuda!
j-
function show(){ var images = document.querySelectorAll('gr'); var elem = document.getElementById('chb'); images.forEach(function(image) { image.addEventListener('click', function() { elem.innerHTML = image.getAttribute('alt'); }); }); } <div class="grupe" id="gr"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;"> <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;"> <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;"> <img src="https://images.assettype.com/fortuneindia%2F2020-06%2Fef53f9be-f257-4aa3-9af5-6ca1a9f33a86%2Fclose_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;"> </div> <div class="check"> <label for="checkb"> <b>Rodyti aprasyma:</b> </label> <input type="checkbox" id="chb" onclick="show()" /> </div>¿Alguien puede ayudar con esto? :)
let chb = document.getElementById('chb'); let images = document.querySelectorAll('img'); chb.addEventListener('change', function(e) { if (e.target.checked) { // set alts as titles images.forEach(function(image) { image.setAttribute('title', image.getAttribute('alt')) }); } else { // remove the titles images.forEach(function(image) { image.setAttribute('title', '') }); } }) <div class="grupe" id="gr"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;"> <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;"> <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;"> <img src="https://images.assettype.com/fortuneindia%2F2020-06%2Fef53f9be-f257-4aa3-9af5-6ca1a9f33a86%2Fclose_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;"> </div> <div class="check"> <label for="checkb"> <b>Rodyti aprasyma:</b> </label> <input type="checkbox" id="chb" /> </div>Varios asuntos
Esto es lo que creo que querías hacer
window.addEventListener("DOMContentLoaded", function() { const container = document.getElementById('gr'); const chb = document.getElementById('chb'); container.addEventListener('mouseover', function(e) { const tgt = e.target; if (tgt.tagName === "IMG") tgt.setAttribute("title",chb.checked ? tgt.getAttribute('alt') : ""); }); }); <div class="grupe" id="gr"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;"> <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;"> <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;"> <img src="https://images.assettype.com/fortuneindia%2F2020-06%2Fef53f9be-f257-4aa3-9af5-6ca1a9f33a86%2Fclose_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;"> </div> <div class="check"> <label for="checkb"> <b>Rodyti aprasyma:</b> </label> <input type="checkbox" id="chb" /> </div>Tienes algunos problemas con tu código. Si desea mostrar el nombre alternativo al pasar el mouse sobre las imágenes, necesita un evento de mouse diferente. Además, debe tener un elemento HTML separado para mostrar el nombre alternativo.
Espero que esto ayude.
function show() { var images = document.querySelectorAll("img"); var elem = document.getElementById("chb-label"); images.forEach(function(image) { image.addEventListener("mouseenter", function(e) { elem.innerHTML = e.target.alt; console.log("epa", e.target.alt); }); }); } <div class="grupe" id="gr"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;"> <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;"> <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;"> <img src="https://images.assettype.com/fortuneindia%2F2020-06%2Fef53f9be-f257-4aa3-9af5-6ca1a9f33a86%2Fclose_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;"> </div> <div class="check"> <label for="checkb"> <b>Rodyti aprasyma:</b> </label> <input type="checkbox" id="chb" onclick="show()" /> <span id="chb-label"></span> </div>