codigo para imagen emergente.

caiati · #1 (**permalink**) 26/04/2011, 10:09

Buenas tardes, tengo un problema, necesito crear en una parte de la pagina un "boton" se le puede decir, que ponga "pulsa aquí" y cuando se pulse que salga al centro de la pantalla una imagen. No se si me abre explicado bien.
Crear un boton y cuando se pulse que salga en el centro de la pantalla una imagen y por ejemplo al pulsar de nuego una tecla del raton desaparezca. Sin mas un saludo a todos, Gracias.

laratik · #2 (**permalink**) 26/04/2011, 13:40

Rápidamente se me ocurre algo como esto:

Código HTML:

<html> 
<head>
<script>
function mostrar() {
	document.getElementById("target").style.display = "block";
	document.getElementById("overlay").style.display = "block";
}
function ocultar() {
	document.getElementById("target").style.display = "none";
	document.getElementById("overlay").style.display = "none";
}
</script>

<style>
#target {
	display: none;
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	z-index: 1001;
}

#overlay {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
</style>

</head> 
 
<body>
<input type="button" value="pulsa aqui" onClick="mostrar()" />
<img src="images/header.jpg" id="target" onClick="ocultar()" />
<div id="overlay" onClick="ocultar()"></div>
</body> 
</html>