Intercambio de imagenes

isabelramirezmontoya · #1 (**permalink**) 13/09/2013, 15:17

Buenas tardes, chicos me dan una mano por fa

Tengo el siguiente codigo, el cual muestra en la capa1 una imagen en tamaño 500 x 500. En la capa2 tengo 5 imagenes en tamaño 15 x 15.

¿Como hago para que cuando el usuario haga docle click en una imagen de la capa2 esta se vea en la capa1?

Código HTML:

Ver original<html>
 
<head>
<title>Catalogo</title>
</head>
 
<body>
 
<div id="capa1" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="500" height="500">
</div>
 
<div id="capa2" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="15" height="15">
<img src="http://econscientes.com/images/imagen-2.jpg" width="15" height="15">
<img src="http://econscientes.com/images/imagen-3.jpg" width="15" height="15">
<img src="http://econscientes.com/images/imagen-4.jpg" width="15" height="15">
<img src="http://econscientes.com/images/imagen-5.jpg" width="15" height="15">
</div>
 
</body>
 
</html>

Gracias

ocp001a · #2 (**permalink**) 13/09/2013, 15:47

Si lo que quieres es hacer que una imagen pase de un div a otro tienes que

asignar el evento ondblclick="" a cada imagen
cuando se de el evento, agregar el nodo (elemento) al div destino
eliminar el elemento "clickeado"

isabelramirezmontoya · #3 (**permalink**) 13/09/2013, 17:13

ocp001a, gracias por tu colaboracion

Lo de doble click es un decir, realmente con un click es suficiente.

A cada imagen le coloque el evento onclick() y cree una funcion denominada ver_imagen, pero no se como referenciar cada imagen, en esta parte me pierdo.

Código HTML:

Ver original<html>
 
<head>
<title>Catalogo</title>
 
<script language="javascript">
 
function ver_imagen(){
 document.getElementByID('capa1');
}
 
</script>
 
</head>
 
<body>
 
<div id="capa1" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="500" height="500">
</div>
 
<div id="capa2" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="15" height="15" onclick="ver_imagen()">
<img src="http://econscientes.com/images/imagen-2.jpg" width="15" height="15" onclick="ver_imagen()">
<img src="http://econscientes.com/images/imagen-3.jpg" width="15" height="15" onclick="ver_imagen()">
<img src="http://econscientes.com/images/imagen-4.jpg" width="15" height="15" onclick="ver_imagen()">
<img src="http://econscientes.com/images/imagen-5.jpg" width="15" height="15" onclick="ver_imagen()">
</div>
 
</body>
 
</html>

ocp001a · #4 (**permalink**) 13/09/2013, 17:35

Aquí
onclick="ver_imagen()"

puedes pasar el elemento dierctamente

onclick="ver_imagen(this)"

o bien su id

onclick="ver_imagen(this.id)"

No estoy seguro de qué quieres lograr, pero a partir de aquí podrías hacer las demás operaciones de agregar un nodo a un div y quitarlo del otro.

isabelramirezmontoya · #5 (**permalink**) 13/09/2013, 19:10

ocp001a, lo organice de esta forma, pero no logro que me funcione

¿Que Me falta?

Código HTML:

Ver original<html>
 
<head>
<title>Catalogo</title>
 
<script language="javascript">
 
function ver_imagen(){
 document.getElementByID('capa1').src = img.src;
}
 
</script>
 
</head>
 
<body>
 
<div id="capa1" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="500" height="500">
</div>
 
<div id="capa2" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="15" height="15" onclick="ver_imagen(this)">
<img src="http://econscientes.com/images/imagen-2.jpg" width="15" height="15" onclick="ver_imagen(this)">
<img src="http://econscientes.com/images/imagen-3.jpg" width="15" height="15" onclick="ver_imagen(this)">
<img src="http://econscientes.com/images/imagen-4.jpg" width="15" height="15" onclick="ver_imagen(this)">
<img src="http://econscientes.com/images/imagen-5.jpg" width="15" height="15" onclick="ver_imagen(this)">
</div>
 
</body>
 
</html>

omarinfinito · #6 (**permalink**) 13/09/2013, 19:51

Código HTML:

Ver original<html>
 
<head>
<title>Catalogo</title>
 
<script language="javascript">
 
function ver_imagen(src){
document.getElementById("img1").src = src;
}
 
</script>
 
</head>
 
<body>
 
<div id="capa1" align="center">
<img id="img1" src="http://econscientes.com/images/imagen-1.jpg" width="500" height="500">
</div>
 
<div id="capa2" align="center">
<img src="http://econscientes.com/images/imagen-1.jpg" width="15" height="15" onclick="ver_imagen(this.src)">
<img src="http://econscientes.com/images/imagen-2.jpg" width="15" height="15" onclick="ver_imagen(this.src)">
<img src="http://econscientes.com/images/imagen-3.jpg" width="15" height="15" onclick="ver_imagen(this.src)">
<img src="http://econscientes.com/images/imagen-4.jpg" width="15" height="15" onclick="ver_imagen(this.src)">
<img src="http://econscientes.com/images/imagen-5.jpg" width="15" height="15" onclick="ver_imagen(this.src)">
</div>
 
</body>
 
</html>

Listado de errores:
1.- primero que nada al pasar la linea

Código Javascript:

Ver originalonclick="ver_imagen(this);"

No estas diciendo si es el SRC o el id :P

2.- en la funcion le estas definiendo el SRC a la capa 1, y la capa 1 es un div, yo le puse id a la imagen, y le di el SRC a ella

3.-al definir la variable ver_imagen en javascript, no estas recogiendo los valore.

Si quieres ponerlo con doble click, cambia los "Onclick" por "Ondblclick"