Quiero capturar cual de las imágenes fue pulsada para así en el visor poder cambiar la imagen y el figcaption. Pero debo hacerlo con los eventos de campo semántico y sin tocar el html que ya tengo.
Es decir, que sea con el window.onload
y capture en cual de las imágenes esta haciendo el onclick
.
Gracias.
window.onload = function()
{
let elemento = document.querySelectorAll("aside > img");
elemento.onclick = function()
{
cambiarImagen(this);
}
function cambiarImagen(param)
{
document.getElementsByTagName("img")[5].src = param.src;
document.getElementsByTagName("figcaption")[0].innerHTML = param.alt;
}
}
<html>
<body>
<h1>Visor de imágenes</h1>
<aside id="parte_lateral">
<img src="imagen1.jpeg" alt="Descripción imagen 1">
<img src="imagen2.jpg" alt="Descripción imagen 2">
<img src="imagen3.jpg" alt="Descripción imagen 3">
<img src="imagen4.jpg" alt="Descripción imagen 4">
<img src="imagen5.jpg" alt="Descripción imagen 5">
</aside>
<section id="parte_central">
<figure>
<img src="imagen1.jpeg" alt="Descripción imagen 1">
<figcaption>Descripción imagen 1</figcaption>
</figure>
</section>
</body>
</html>