Como poner imagen en celda al hacer clic en otra celda???

YeisonSoto · #1 (**permalink**) 21/04/2011, 12:06

Estoy realizando un juego en html y javascript, en el juego se debe acomodar unas imagenes haciendo click en ellas y poniendolas en la parte superior de tal forma que se consiga armar la secuencia correspondiente a la historia.

Lo que necesito saber es como al hacer clic en una imagen por ejemplo en la numero 1 y despues darle clic a su casilla respectiva que sería la primera de la tabla, se visualize tambiem allí, de lo contrario, si se quiere poner en otra casilla no lo deje y muestre una alerta de error..

[URL="http://squadronsuicida.webs.com/imagenes_foros/primera.rar"]
Aqui el proyecto
[/URL]
Les agradezco la ayuda que me puedan dar....

Gracias

_cronos2 · #2 (**permalink**) 21/04/2011, 15:15

Puedes comprobar mediante el id de la celda y el de la imagen (o el src), y si es la adecuada usas innerHTML.
Saludos (:

YeisonSoto · #3 (**permalink**) 22/04/2011, 14:03

Cita:

Iniciado por _cronos2

Puedes comprobar mediante el id de la celda y el de la imagen (o el src), y si es la adecuada usas innerHTML.
Saludos (:

_Cronos, no manejo muy bien el tema, porfavor me puedes dar un ejemplo????

Gracias..

_cronos2 · #4 (**permalink**) 22/04/2011, 14:04

A ver si entiendes el concepto:

Cita:

if(condicion){
celda.innerHTML = '<b> Texto en negrita! </b>';
}

Saludos (:

YeisonSoto · #5 (**permalink**) 22/04/2011, 16:19

Cita:

Iniciado por _cronos2

A ver si entiendes el concepto:

Saludos (:

Mira amigo lo del innerHTML, no lo conocia pero me funcionó así:

document.b1.innerHTML = a;

y pude agreagrle texto a la celda, pero la imagen no pude...

por el momento lo esoty haciendo asi:

// Una funcion que recibe la ruta de la imagen presionada

Código HTML:

function pasar(campo){
		          
	  a=campo.src;//recive la ruta de la imagen presionada }

// Otra funcion para poner la imagen presionada en la otra celda

Código HTML:

function colocarA1(){	
				
if(a=="file:///C:/Documents%20and%20Settings/Yeison%20Soto/Mis%20documentos/ova/imagenes/1.JPG"){
							
 document.getElementById("b1").src=a;//Le doy  la ruta de la imagen presionada
					
                }

Pero tengo un grande problema y es que al ponerle la ruta como condicon, el archivo nesariamente deberia estar ahi, en caso de lo cambiase de lugar ya no me funcionaria...

Como ouedo capturar el nombre de la imagen que presioné y no toda la ruta??

He intentado con el id del img pero como las imagenes cambian cada vez que se carga la pagina no me funciona con el id, por favor te pido que revises mi proyecto y me puedas ayudar

Gracias...

InKarC · #6 (**permalink**) 22/04/2011, 22:13

Código Javascript:

Ver original$(".imagenes_pequeñas").click(function(){
    var seleccionada = this.id;
})
 
$(".cuadros_grandes").click(function(){
 
if(seleccionada == this.id + "_celda"){
   $(this).html("<img src='"+this.id+".jpg' />")
} else {
  alert("imagen incorrecta!")
}
 
})

Con jquery todo lo que quieres hacer es usando ese codigo.

Simplemente tienes que usar las clases mencionadas(.cuadros_grandes e .imagenes pequeñas ); colocarle los IDS correspondientes (por ejemplo la imagen grande tiene id vaca entonces la pequeña debe tener id vaca_celda ). Y la imagen que tienes grande debe tener el mismo nombre (en el caso del ejemplo seria vaca.jpg)

InKarC · #7 (**permalink**) 22/04/2011, 22:17

Cita:

if(a=="file:///C:/Documents%20and%20Settings/Yeison%20Soto/Mis%20documentos/ova/imagenes/1.JPG"){

Aunque tal vez deberías aprender un poco mas de los conceptos básicos de javascript y html antes de seguir intentando crear efectos como este.

IsaBelM · #8 (**permalink**) 23/04/2011, 04:03

prueba con esto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
var eleccion = [];
var img = [];
function fnc(id, src) {
eleccion.push(id);
img.push(src);
}

function fnc2(id) {
if ('des'+id == eleccion[eleccion.length-1]) {
document.getElementById(id).style.background = "url("+img[img.length-1].split('/')[img[img.length-1].split('/').length-1]+")";
document.getElementById(id).style.borderColor = 'green';
document.getElementById('des'+id).src = 'sprite_pixel.gif';
} else {
alert('error');
}

}
</script>
<style type="text/css">
#puzzle div, #desorden div {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="puzzle">
<div id="_1" onclick="fnc2(this.id);"></div>
<div id="_2" onclick="fnc2(this.id);"></div>
<div id="_3" onclick="fnc2(this.id);"></div>
<div id="_4" onclick="fnc2(this.id);"></div>
<div id="_5" onclick="fnc2(this.id);"></div>
</div>

<div id="desorden">
<div><img src="3.gif" id="des_3" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="1.gif" id="des_1" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="4.gif" id="des_4" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="2.gif" id="des_2" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="5.gif" id="des_5" alt="" onclick="fnc(this.id, this.src);" /></div>
</div>
</body>
</html>

YeisonSoto · #9 (**permalink**) 24/04/2011, 20:28

Cita:

Iniciado por InKarC

Aunque tal vez deberías aprender un poco mas de los conceptos básicos de javascript y html antes de seguir intentando crear efectos como este.

InKarC ,tienes razon debo aprender mucho mas de este lenguaje y creo que en este foro lo puedo hacer

oscargalileo · #10 (**permalink**) 24/04/2011, 22:26

Me parece que con el ejemplo de IsaBelM haces exactamente lo que querías.

YeisonSoto · #11 (**permalink**) 24/04/2011, 23:32

Cita:

Iniciado por oscargalileo

Me parece que con el ejemplo de IsaBelM haces exactamente lo que querías.

Sí. gracias a la ayuda de isabel e InKarC pude hacer lo que queria

Pero ahora tengo otra duda :

Como habia dicho al principio en el juego se debe armar la secuencia de una historia (un cuento), pero para eso el niño debera haber escuchado dicho cuento antes de realizar esta prueba, y me pregunto cual es la manera correcta de hacer esto, que cuando se haya escuchado el cuento se pase a este juego.

He estado averiguando la cuestion de sonido en html y aparecen opciones como embed y bgsound que con un boton se podria hacer que se reprodujera el cuento, pero he visto que tienen limitaciones en cuanto a un navegador y otro

Cual es la mejor forma de hacer esto??, de una manera elegante no solo que se escuche el audio y ya , drepronto con flash??

Me pueden ayudar tambien con esto??

Gracias