JavaScript - Mostrar imagen según click realizado en imagen pequeña

 
Vista:
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen según click realizado en imagen pequeña

Publicado por Beatriz (4 intervenciones) el 30/11/2018 07:46:40
OK

Realizar el js, para que cuando cliquemos en alguna imagen se nos muestre en grande y con su titulo correspondiente.

EL HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 2.998
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen según click realizado en imagen pequeña

Publicado por xve (2096 intervenciones) el 30/11/2018 09:15:37
Hola Beatriz, he eliminado los enlaces de los <a...>, para que no se refresque la página, y te he añadido al final el código javascript...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>


Ya nos comentaras si te sirve!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen según click realizado en imagen pequeña

Publicado por Beatriz (4 intervenciones) el 01/12/2018 17:10:02
Gracias!! Pero no funciona.... al clicar no muestra la imagen.. unicamente me sale esto;
ok
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 2.998
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen según click realizado en imagen pequeña

Publicado por xve (2096 intervenciones) el 01/12/2018 23:35:57
Has revisado la consola, por si hay algún error?
Como ha quedado el código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen según click realizado en imagen pequeña

Publicado por Beatriz (4 intervenciones) el 03/12/2018 15:43:58
Captura-de-pantalla-2018-12-03-a-las-15.42.56

Me dice que no es un objeto, me dice que es nulo en la primera linea de cogido del js;
Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen según click realizado en imagen pequeña

Publicado por Beatriz (4 intervenciones) el 03/12/2018 18:11:51
he tenido que volver a poner los enlaces en la pagina por que tampoco me funcionaba.... en la consola no me saltan errores
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar