JavaScript - Mostrar imagen hidden

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 22/03/2014 15:36:24

Buenas tardes,

estoy haciendo el típico juego de "encuentra las 7 diferencias". Para ello he colocado las dos imágenes (la original y la modificada) una al lado de la otra. Sobre la modificada, en cada una de las diferencias, he puesto una imagen de un tick verde, en principio oculta, tal que así:

Y el código JavaScript que tengo es el siguiente:

document.getElementById(id).visibility = "visible";
document.getElementById(id).onClick="#";
contador++;
if (contador == 7) {

alert("Enhorabuena, has encontrado todas las diferencias.");
opener.document.bp1.src="img/principal/uno.gif";
opener.document.bp1.onClick="alert('Ya has conseguido este reto')";
window.close();

}

}
</script>

Es decir, quiero que cuando el usuario haga click sobre la diferencia, cambie la visibilidad del tick para que se muestre y que cuando el contador sea igual a 7 (es decir, haya encontrado todas las diferencias) muestre un alert, cambie una imagen en la ventana desde la que se ha abierto el juego y se cambie su evento onClick, y además se cierre la ventana del juego.

Mi problema creo que es que no funciona el evento on click de las imágenes de los ticks. ¿Es por estar "hidden"?

Agradezco mucho la ayuda que me podáis ofrecer.

Un saludo.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Mostrar imagen hidden

Publicado por xve (2100 intervenciones) el 23/03/2014 18:49:40

Hola Noelia, tal y como dices, si la imagen no se ve, no se puede pulsar... para ello, una solución es poner la imagen dentro de un div y utilizar el evento onclik en el div.

De todas maneras, para pasar el id, creo que tienes que ser así:

.....:hidden;" onClick="cambiar(this.id)">

Espero que te sirva... coméntanos ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 25/03/2014 17:09:16

Hola,

muchas gracias por tu respuesta. Metiéndolo en un <div> funciona el onClick (lo he comprobado con un alert), sin embargo sigue sin funcionarme esta línea: document.getElementById(id).visibility = "visible";

¿Alguna idea?

Gracias y un saludo.

Valora esta respuesta

Comentar

Pos: 22

Val: 71

Mostrar imagen hidden

Publicado por Jose maria (1 intervención) el 25/03/2014 17:22:48

Hola Noelia:

Por probar otra solución.

Si al div le asignamos un style="display:none;", en el scrip pasaríamos a document.getElementById("mi_id_del_div").style.display = "";

Saludos.

Valora esta respuesta

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 25/03/2014 21:45:33

Hola Jose María,

gracias por tu respuesta. No puedo poner un display:none al div, porque entonces no ocuparía espacio y no se le podría producir el evento onClick.

De momento, metiendo la imagen en un div, funciona correctamente el evento y llama a la función que quiero, que es la que escribí en el primer mensaje, con la única diferencia de que ahora le paso dos parámetros: uno es el id del img y otro el del div, para cambiar visibility al del img y el onClick al del div.

La función lo hace todo correctamente, excepto por el "pequeño" detalle de que no ejecuta las dos primeras líneas.

Sigo trabajando en ello, si alguien tiene alguna idea, será bienvenida.

Un saludo.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar imagen hidden

Publicado por xve (2100 intervenciones) el 26/03/2014 07:38:55

Hola Noelia, creo que Jose Maria, hace referencia a la imagen, no la div... en vez de trabajar con visibility, utiliza display... la verdad, es que yo nunca he utilizado visibility...

Valora esta respuesta

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 26/03/2014 15:04:49

Vale, efectivamente, poniendo el display:none a la imagen funciona, pero me surge un nuevo problema. Al div le doy altura y anchura pero, al poner la imagen con display:none la anchura me la respeta, pero la altura no, necesito que tenga 20 px de alto y sólo tiene 1px.

Además, sigue sin cambiar el evento onClick en la segunda línea de código JS.

Muchas gracias a los dos y perdonad que os maree.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar imagen hidden

Publicado por xve (2100 intervenciones) el 26/03/2014 21:55:23

Hola Noelia, que propiedades tienes ese div?

Si no recuerdo mal, por defecto, al ser display:block tendría que cogerte el valor height del css

Si nos puedes comentar...

Valora esta respuesta

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 27/03/2014 13:35:41

Hola,

el div ahora mismo está así:

<div id="dt1" style="position:absolute; top:233px; left:690px; width:80px; heigth:20px; border:1px;

     border-style:solid; border-color:black; display:block" onClick="cambiar('t1', 'dt1')">

     <img id="t1" src="img/uno/tick.png" style="position:absolute; top:233px; left:730px; display:none"></div>

El borde sólo se lo he puesto para ver exactamente dónde está, se lo quitaré cuando todo funcione bien, y el display se lo acabo de poner para probar lo que me dices, pero aún así no me coge la altura.

Muchas gracias por la ayuda.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar imagen hidden

Publicado por xve (2100 intervenciones) el 27/03/2014 16:41:46

Hola Noeli, tienes un error ortografico... no es heigth, es height.

Valora esta respuesta

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 27/03/2014 21:39:03

¡Qué tonta! Muchas gracias.

Ahora, por supuesto, sí que coge la altura que quiero. Por fin funciona todo como quería, excepto porque no me cambia los eventos onClick, recuerdo cómo era el script:

<script language="JavaScript">

		var contador = 0;

		function cambiar(t, dt) {

   			document.getElementById(t).style.display="block";

  			contador++;

  			if (contador == 7) {

  				alert("Enhorabuena, has encontrado todas las diferencias");

				opener.document.bp1.src="img/principal/uno.gif";

				opener.document.bp1.onClick="alert('Ya has superado este reto.')";

				window.close();

                        alert(contador);  //para comprobar

			document.getElementById(dt).onClick="#";

	</script>

No cambia ni el evento onClick del objeto bp1 de opener (aunque este me preocupa menos, porque podría gestionarlo desde su propia ventana) ni el del div que paso por parámetro.

Muchas gracias.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar imagen hidden

Publicado por xve (2100 intervenciones) el 28/03/2014 07:47:44

Hola Noelia, que es opener?

Valora esta respuesta

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 28/03/2014 16:31:07

Hola,

es la ventana desde la cuál he abierto la actual. Es decir, yo tengo una ventana principal desde la cual abro otra de esta manera:

window.open("documento.html", "nombreVentana", "opcionesVentana");

Por tanto, el primer parámetro es el documento con el cuál se abrirá la nueva ventana, el segundo parámetro será el nombre que va a tener la ventana y el tercero son sus opciones (tamaño, barras de menú, etc). Tienes más información aquí.

Después, para hacer referencia desde la nueva ventana a la ventana que la ha abierto, se utiliza "opener".

Espero haberme explicado bien.

Un saludo.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar imagen hidden

Publicado por xve (2100 intervenciones) el 28/03/2014 21:00:17

Hola Noelia, muchas gracias, te has explicado perfectamente, pero creo que no hace eso que dices...

Mira este ejemplo:

var myWindow = window.open("documento.html","nombreVentana","opcionesVentana");

myWindow.opener.document.write("<p>This is the source window!</p>");

Para lo que tu necesitas, creo que tienes que hacer algo como:

parent.document.bp1.src="img/principal/uno.gif";

Puedes probar ha hacer el cambio y probarlo?

Valora esta respuesta

Comentar

Mostrar imagen hidden

Publicado por Noelia (8 intervenciones) el 29/03/2014 15:18:43

Hola,

como tú me dices no funciona, no obstante, precisamente en la línea que me has puesto, es decir, la de cambiar el src de la imagen, sí que me funciona tal y como lo tengo puesto (con el opener), la que no funciona es la de onClick. Tengo dos líneas para cambiar un onClick, una es justo debajo de esa que me has comentado, para cambiar el del elemento de la ventana principal, y otra es la de cambiar el onClick del div de la página actual.

Al ser justamente los dos onClicks no que no me funciona y todo lo demás sí, no sé si podría ser algún problema de sintaxis.

Un saludo.

Valora esta respuesta

Comentar

Porque no funciona el primer caso (switch)

Combos o listas que dependen del resultado del otro