popUp con Javascript
salva
08 de Febrero del 2003
Hola
Tengo una pagina con numerosas fotos pequeñas, que quiero que se amplien en una popUp pinchando sobre ellas.
Obviamente esto es sencillo, el problema radica en que quiero que la popUp tenga un color de fondo definido y un jpg que hace las veces de titular, debajo del cual saldria el jpg concreto ampliado, y por supuesto no quiero tener que hacer tantas paginas html como fotos tengo, sino que un script me genere la popUp y contenga la variable del jpg que este pinchando.
Alguien puede ayudarme
Gracias
Tengo una pagina con numerosas fotos pequeñas, que quiero que se amplien en una popUp pinchando sobre ellas.
Obviamente esto es sencillo, el problema radica en que quiero que la popUp tenga un color de fondo definido y un jpg que hace las veces de titular, debajo del cual saldria el jpg concreto ampliado, y por supuesto no quiero tener que hacer tantas paginas html como fotos tengo, sino que un script me genere la popUp y contenga la variable del jpg que este pinchando.
Alguien puede ayudarme
Gracias
batchelar
08 de Febrero del 2003
A ver si te entendí
Quieres una función para todas tus fotos. Ok, prueba con esto.
<script language="Javascript">
function verimagen(a,b,c) {
window.open("/images/"+a+".jpg", "_blank", 'width='+b+' height='+c+',toolbar=0,location=0,status=0,menuBar=0,scrollBars=0,resizable=0,top=50,left=100');
}
</script>
Esto debe ir al principio de tu página entre las etiquetas <HEAD> y </HEAD>
Ahora, se supone que tienes las imagenes en una carpeta llamada "images" que está en la raíz de tu servidor.
Ahora, para que se vea la imagen pon este vínculo:
<a href="javascript:verimagen('atardecer','360','270')">Ver fotografía 1</a>
en donde 'atardecer' es el nombre de la foto, 360 es el ancho y 270 es el alto.
En este ejemplo todas las imágenes deben tener extensión .jpg. Siempre súmale unos 20 pixeles al ancho y el alto para que se vea bien. Siguiendo con este ejemplo, la foto se llama atardecer.jpg y mide 340 de ancho y 250 de alto.
Si quieres poner más vínculos de fotos
<a href="javascript:verimagen('anochecer','260','130')">Ver fotografía 2</a>
etc.
Aqui tienes el código de una página. Espero te sirva.
<html>
<head>
<title>Muchas fotos</title>
<script language="Javascript">
function verimagen(a,b,c) {
window.open("/images/"+a+".jpg", "_blank", 'width='+b+' height='+c+',toolbar=0,location=0,status=0,menuBar=0,scrollBars=0,resizable=0,top=50,left=100');
}
</script>
</head>
<body>
<a href="javascript:verimagen('atardecer','277','197')">Ver fotografía 1</a>
<a href="javascript:verimagen('anochecher','277','189')">Ver fotografía 2</a>
<a href="javascript:verimagen('mediodia','360','270')">Ver fotografía 3</a>
<a href="javascript:verimagen('etcetera','366','242')">Ver fotografía 4</a>
</body>
</html>
Quieres una función para todas tus fotos. Ok, prueba con esto.
<script language="Javascript">
function verimagen(a,b,c) {
window.open("/images/"+a+".jpg", "_blank", 'width='+b+' height='+c+',toolbar=0,location=0,status=0,menuBar=0,scrollBars=0,resizable=0,top=50,left=100');
}
</script>
Esto debe ir al principio de tu página entre las etiquetas <HEAD> y </HEAD>
Ahora, se supone que tienes las imagenes en una carpeta llamada "images" que está en la raíz de tu servidor.
Ahora, para que se vea la imagen pon este vínculo:
<a href="javascript:verimagen('atardecer','360','270')">Ver fotografía 1</a>
en donde 'atardecer' es el nombre de la foto, 360 es el ancho y 270 es el alto.
En este ejemplo todas las imágenes deben tener extensión .jpg. Siempre súmale unos 20 pixeles al ancho y el alto para que se vea bien. Siguiendo con este ejemplo, la foto se llama atardecer.jpg y mide 340 de ancho y 250 de alto.
Si quieres poner más vínculos de fotos
<a href="javascript:verimagen('anochecer','260','130')">Ver fotografía 2</a>
etc.
Aqui tienes el código de una página. Espero te sirva.
<html>
<head>
<title>Muchas fotos</title>
<script language="Javascript">
function verimagen(a,b,c) {
window.open("/images/"+a+".jpg", "_blank", 'width='+b+' height='+c+',toolbar=0,location=0,status=0,menuBar=0,scrollBars=0,resizable=0,top=50,left=100');
}
</script>
</head>
<body>
<a href="javascript:verimagen('atardecer','277','197')">Ver fotografía 1</a>
<a href="javascript:verimagen('anochecher','277','189')">Ver fotografía 2</a>
<a href="javascript:verimagen('mediodia','360','270')">Ver fotografía 3</a>
<a href="javascript:verimagen('etcetera','366','242')">Ver fotografía 4</a>
</body>
</html>