Colocar imagen en ventana

helena71 · #1 (**permalink**) 22/07/2012, 18:36

Buenas noches

Tengo una duda con la cual no he podido, les agradeceria cualquier sugerencia gracias.

Tengo una especie de ventana modal que abro o cierro con un boton a traves de una funcion, hasta este punto todo me funciona la ventana abre y cierra bien

Necesito poner una imagen en la ventana, como lo hago. El nombre de la imagen la quiero pasar desde la funcion con la variable $imagen

EL codigo que estoy usando es el siguiente:

<html>
<head>
</head>

<body>
function mostrarImagen($imagen)
{
var imagen = $imagen;
var ventana = document.getElementById('visualizarfoto'); // Accedemos al contenedor
ventana.style.marginTop = "35px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-550) / 2) + "px"; // Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}

function ocultarImagen()
{
var ventana = document.getElementById('visualizarfoto'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}

Ventana modal

<div id="visualizarfoto" style="position: fixed; width: 500px; height: 500px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 1px solid; background-color: #FAFAFA; color: #000000; display:none;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Imagen</div>

<div>aqui quiero poner la imagen</div>

<div style="padding: 10px; text-align: center; margin-top: 4px;"><input id="btnAceptar" onclick="ocultarImagen();" name="btnAceptar" size="20" type="button" value=" Cerrar " />
</div>

Boton para llamar llamar la funcion

echo '<a href="javascript:mostrarImagen((\''.$imagen.'\');) ;">Ver imagen</a>';

</body>
</html>

chicos gracias

Helen

furoya · #2 (**permalink**) 22/07/2012, 19:14

Sabes que eso que escribiste no funciona de ninguna forma, ¿verdad?.

Es tan desastroso que hasta entiendo por qué no lo metiste entre etiquetas de código: sería una falta de respeto a las etiquetas de código.

Y tampoco hay ninguna "especie" de ventana modal. Con suerte, hay una capa.

Y ...

En fin, bienvenida al Foro, Helen.

helena71 · #3 (**permalink**) 23/07/2012, 19:08

furoya, gracias por tu colaboracion.

Te cuento que a mi me funciona perfectamente, cuando oprimo el boton ver imagen, se ejecuta la funcion mostrarimagen y se abre una ventana, la cual se puede cerrar con la funcion ocultarImagen.

En estos momentos si coloco una imagen fija en la ventana aparece de forma correcta, lo que quiero es hacer mas dinamica la ventana, pasado el nombre de la imagen desde la funcion, para que sea diferente cada vez que se abre la ventana

Código HTML:

Ver original<html>
<head>
</head>
 
<body>
 
<script language="JavaScript">
 
function mostrarImagen($imagen)
{
var imagen = $imagen;
var ventana = document.getElementById('visualizarfoto'); // Accedemos al contenedor
ventana.style.marginTop = "35px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-550) / 2) + "px"; // Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}
 
function ocultarImagen()
{
var ventana = document.getElementById('visualizarfoto'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
 
</script>
 
//Ventana modal
 
<div id="visualizarfoto" style="position: fixed; width: 500px; height: 500px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 1px solid; background-color: #FAFAFA; color: #000000; display:none;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Imagen</div>
 
<div>aqui quiero poner la imagen</div>
 
<div style="padding: 10px; text-align: center; margin-top: 4px;"><input id="btnAceptar" onclick="ocultarImagen();" name="btnAceptar" size="20" type="button" value=" Cerrar " />
</div>
 
 
//Boton para llamar llamar la funcion
 
<?php
echo '<a href="javascript:mostrarImagen((\''.$imagen.'\');) ;">Ver imagen</a>';
?>
 
</body>
</html>

Gracias

Helena

dontexplain · #4 (**permalink**) 24/07/2012, 03:21

Eso no es una ventana sino una capa. Y en la capa puedes insertar cualquier contenido creando un nuevo nodo dentro de la capa.

el=document.createElement("img");
el.src=url;
capa.appendChild(el);

Un saludo.

furoya · #5 (**permalink**) 24/07/2012, 08:53

Sí, ya le estuve diciendo que es una capa.
No le quise responder su "duda" porque el planteo y la forma de presentar el código eran una falta de respeto; pero cuando vi que lo metió entre etiquetas de HTML lo reconsideré.

Hasta que leí que siguió insistiendo en que "eso" que puso arriba le funcionaba, y que además metió líneas de PHP en vez del código generado. Y encima repite que eso es una ventana (aunque por lo menos ya no dice que es "modal").

Si se hubiese portado un poco mejor, hasta se le podría haber recomendado algo más fácil que generar nodos : escribir la etiqueta <img src=""> con algún id="" en lugar del <div>, y apuntarle directamente con un getElementById("").src para cambiar la ruta de la foto.

Pero ya estamos un poco hartos de gente que viene con cualquier planteo desubicado.