HTML - Cambiar texto al hacer clic sobre imagen

 
Vista:
sin imagen de perfil

Cambiar texto al hacer clic sobre imagen

Publicado por Julio (3 intervenciones) el 23/02/2016 09:45:34
Buenos días:

A ver si alguien me puede ayudar. Tengo una página con una tabla de n filas y 2 columnas. En cada celda de la columna de la izquierda tengo una imagen y las celdas de la derecha las tengo todas combinadas en una.

Lo que quiero es que al hacer clic en una imagen de una celda de la izquierda me aparezca en la celda combinada de la derecha un texto.

Es para hacer una especie de catalogo. Las descripciones no hace falta que estén en una tabla ni nada por el estilo. Son pocas y no van a ir cambiando. Aunque tuviese que escribir código por cada enlace no me importaría.

Sería como en las imagenes adjuntas. En función de la imagen sobre la que hago clic me aparece un texto.
foto1
foto2
foto3
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: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Cambiar texto al hacer clic sobre imagen

Publicado por xve (1543 intervenciones) el 23/02/2016 12:31:43
Hola Julio, aquí te adjunto un simple ejemplo que hace lo que quieres utilizando jquery... En el ejemplo, hay que poner las rutas de las imágenes...;)

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="//code.jquery.com/jquery-2.2.0.min.js"></script>
	<style>
		.imagenes {float:left;width:120px;}
		.imagenes img {border:1px solid;display:block;border:1px solid;height:100px;width:100px;}
		.resultado {float:left;}
	</style>
 
	<script>
		$(document).ready(function(){
			$(".imagenes img").click(function(){
				$("#texto").html($(this).attr("title"));
			});
		});
	</script>
</head>
 
<body>
	<div class="imagenes">
		<div><img src="" title="esto es un oculista"></div>
		<div><img src="" title="esto es una vaca"></div>
		<div><img src="" title="esto es un tractor"></div>
	</div>
	<div class="resultado">
		<div id="texto"></div>
	</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Cambiar texto al hacer clic sobre imagen

Publicado por Julio (3 intervenciones) el 23/02/2016 15:28:36
Hola:

Lo he probado y no funciona como quiero. Salen las imagenes pero al hacer clic sobre ellas no aparece ningún texto a la derecha. En los src he incluido la ruta a las imagenes.

<div><img src="foto1.jpg" title="esto es un oculista"></div>
<div><img src="foto2.jpg" title="esto es una vaca"></div>
<div><img src="foto3.jpg" title="esto es un tractor"></div>

Debería ser algo así:


Captura

Un saludo
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

Cambiar texto al hacer clic sobre imagen

Publicado por Octavio (4 intervenciones) el 23/02/2016 15:42:20
Prueba a usar el CDN de Google.

Cambia la línea
1
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.0.min.js"></script>

por esta
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Cambiar texto al hacer clic sobre imagen

Publicado por Julio (3 intervenciones) el 23/02/2016 17:22:34
¡¡¡Perfecto!!! Funciona correctamente.

Muchas gracias por la colaboración.

Un saludo
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: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Cambiar texto al hacer clic sobre imagen

Publicado por xve (1543 intervenciones) el 23/02/2016 18:47:13
Hola Octavio, muchas gracias por comentarlo, pero.... porque razón no ha funcionado con el <script...> que puse??

Un saludo
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

Cambiar texto al hacer clic sobre imagen

Publicado por Octavio (4 intervenciones) el 23/02/2016 20:16:17
Buenas xve,

pues la verdad es que no he conseguido averiguarlo. Hice una breve búsqueda por curiosidad pero no encontré nada, y es raro porque si accedemos a la ruta del CDN que indicaste desde un navegador se ve que el enlace no está caido.

A demás, no es la primera vez que me pasa, por eso intuí por donde iban los tiros
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: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Cambiar texto al hacer clic sobre imagen

Publicado por xve (1543 intervenciones) el 24/02/2016 07:48:43
Gracias por comentarlo Octavio... a partir de ahora utilizare el servidor de googleapis...
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