Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Galeria de localitats</title>
<link rel="stylesheet" href="localitats.css" />
<script type="text/javascript" src="localitats.js"></script>
</head>
<body>
<section>
<h1>Galeria de localitats</h1>
<ul id="llistaImatges">
<li><a href="imatges/AlcazarL.jpg" title="Alcázar" >
<img src="imatges/AlcazarXS.jpg" alt="" width="100" height="105" > </a></li>
<li><a href="imatges/salamancaXL.jpg" title="Salamanca">
<img src="imatges/salamancaXS.jpg" alt="" width="100" height="105" ></a></li>
<li><a href="imatges/barcelonaXL.jpg" title="Barcelona">
<img src="imatges/barcelonaXS.jpg" alt="" width="100" height="105" ></a></li>
<li><a href="imatges/palenciaXL.jpg" title="Palencia">
<img src="imatges/palenciaXS.jpg" alt="" width="100" height="105" ></a></li>
<li><a href="imatges/avilaL.jpg" title="Avila">
<img src="imatges/avilaXS.jpg" alt="" width="100" height="105" ></a></li>
</ul>
<h2 id="caption">Alcázar</h2>
<p><img src="imatges/AlcazarL.jpg" alt="" id="imatge" ></p>
</section>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Galeria de localitats</title>
<link rel="stylesheet" href="localitats.css" />
<script type="text/javascript" src="localitats.js"></script>
</head>
<body>
<section>
<h1>Galeria de localitats</h1>
<ul id="llistaImatges">
<li><a href="#" title="Alcázar" >
<img src="imatges/AlcazarXS.jpg" alt="" width="100" height="105" > </a></li>
<li><a href="#" title="Salamanca">
<img src="imatges/salamancaXS.jpg" alt="" width="100" height="105" ></a></li>
<li><a href="#" title="Barcelona">
<img src="imatges/barcelonaXS.jpg" alt="" width="100" height="105" ></a></li>
<li><a href="#" title="Palencia">
<img src="imatges/palenciaXS.jpg" alt="" width="100" height="105" ></a></li>
<li><a href="#" title="Avila">
<img src="imatges/avilaXS.jpg" alt="" width="100" height="105" ></a></li>
</ul>
<h2 id="caption"></h2>
<p><img src="" alt="" id="imatge" ></p>
</section>
</body>
</html>
<script>
var links=document.getElementById("llistaImatges").querySelectorAll("a");
for(let i=0;i<links.length;i++)
{// console.log(i);
links[i].addEventListener("click",mostrarImagen);
}function mostrarImagen()
{document.getElementById("caption").innerHTML=this.getAttribute("title");
document.getElementById("imatge").setAttribute("src",this.querySelector("img").getAttribute("src"));
}</script>
