En esta práctica de JavaScript he puesto en práctica el acceso a los atributos de los elementos de una página HTML.
El usuario pulsará en una serie de imagenes y se les mostrará esas imágenes con un tamaño mayor en un visor de imagenes.
Para poder comprender el código de esta práctica es muy importante conocer la forma de acceder a los elementos del DOM y a los atributos de dichos elementos. Como ayuda puedes echarle un vistazo al siguiente enlace:
Imágenes usadas
 |
 |
 |
 |
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<h2>Pulse sobre la imagen para verla en grande.</h2>
<div id="visor">
<h3 id="descripcion">Fotos</h3>
<img id="pantalla" src="imagenes/foto1.jpg" alt="Foto 1" />
</div>
<div id="muestras">
<img id="primera" src="imagenes/foto1.jpg" alt="Foto 1" />
<img id="segunda" src="imagenes/foto2.jpg" alt="Foto 2" />
<img id="tercera" src="imagenes/foto3.jpg" alt="Foto 3" />
<img id="cuarta" src="imagenes/foto4.jpg" alt="Foto 4" />
</div>
</body>
</html>Código CSS
#muestras img {
width: 100px;
margin: 10px 30px;
cursor: pointer, hand;
}
#visor {
text-align: center;
float: right;
margin: 0px 20px;
}
#pantalla {
width: 500px;
padding: 30px;
border: 5px double blue;
background-color: #bbb6b6;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("primera").addEventListener("click", function(){muestra('primera');}, false);
document.getElementById("segunda").addEventListener("click", function(){muestra(2);}, false);
document.getElementById("tercera").addEventListener("click", function(){muestra(3);}, false);
document.getElementById("cuarta").addEventListener("click", function(){muestra(4);}, false);
}
function muestra(valor) {
let imagen = document.images[valor].src;
let comentario = document.images[valor].alt;
let imagenGrande = document.images["pantalla"];
let texto = document.getElementById("descripcion");
imagenGrande.src = imagen;
texto.innerHTML = comentario;
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.