Hola ogro
Tengo un pequeño problema y por más que le busco solución no lo encuentro, te explico.
Tengo dos imágenes y después habrá más y lo que quiero es que con una misma función llamando a una misma pop-up en la función que se llama popup.html, pase una variable desde cada imagen al llamar a la función y que al abrir la pop-up lea la variable y dependiendo del valor de la variable me habrá en la pop-up una imagen u otra, espero que me haya explicado bien y que puedas ayudarme muchas gracias.
Tengo dos imágenes y después habrá más y lo que quiero es que con una misma función llamando a una misma pop-up en la función que se llama popup.html, pase una variable desde cada imagen al llamar a la función y que al abrir la pop-up lea la variable y dependiendo del valor de la variable me habrá en la pop-up una imagen u otra, espero que me haya explicado bien y que puedas ayudarme muchas gracias.
2 respuestas
Respuesta de ogro
1
Lo que pretendes no es complicado aunque puede resultar un poco lioso a primera vista. De todos modos intentaré explicarme lo mejor posible.
Imagino, por tu explicación, que cada una de las imágenes será un enlace para abrir, a través de un tag <A HREF=""></A>, un pop-up que contenga esa imagen ampliada. Partiendo de esa base, la página principal (por llamarla de alguna manera) ha de tener una función (llemémosla popup) a la cual llamas cada vez que pinchas en una imagen. Para conseguir lo que deseas la llamada desde cada imagen ha de ser como sigue:
<a href="javascript: popup('imagen1.gif');">Imagen 1</a>
<a href="javascript: popup('imagen2.gif');">Imagen 2</a>
y la función popup quedaría de la siguiente manera:
<script language="JavaScript">
function popup(imagen)
{
window.open("popup.html?imagen=" + imagen, "ventana");
}
</script>
Que lo que hace es abrirte una nueva ventana pasando como parámetro Imagen el nombre de la misma. Recuerda siempre ponerle un nombre al pop-up si no quieres que cada vez se te abra en una ventana diferente.
Después, en la ventana de popup deberás recoger el parámetro pasado desde la anterior función. Esto se lleva a cabo desde este código (no lo pongas en una función, sino que ha de ejecutarse siempre, así que colócala al final de todo el código (incluso después de </HTML>), que es el que sigue:
<script language="JavaScript">
cadena = location.search.substring(1);
var pos = cadena.indexOf("=");
var imagen = cadena.substring(pos+1);
document.all.imagen.src = imagen;
</script>
y el tag de la imagen será el siguiente:
<img name="imagen">
Espero que te haya quedado claro, sino ya sabes dónde encontrarme para las aclaraciones que precises.
Imagino, por tu explicación, que cada una de las imágenes será un enlace para abrir, a través de un tag <A HREF=""></A>, un pop-up que contenga esa imagen ampliada. Partiendo de esa base, la página principal (por llamarla de alguna manera) ha de tener una función (llemémosla popup) a la cual llamas cada vez que pinchas en una imagen. Para conseguir lo que deseas la llamada desde cada imagen ha de ser como sigue:
<a href="javascript: popup('imagen1.gif');">Imagen 1</a>
<a href="javascript: popup('imagen2.gif');">Imagen 2</a>
y la función popup quedaría de la siguiente manera:
<script language="JavaScript">
function popup(imagen)
{
window.open("popup.html?imagen=" + imagen, "ventana");
}
</script>
Que lo que hace es abrirte una nueva ventana pasando como parámetro Imagen el nombre de la misma. Recuerda siempre ponerle un nombre al pop-up si no quieres que cada vez se te abra en una ventana diferente.
Después, en la ventana de popup deberás recoger el parámetro pasado desde la anterior función. Esto se lleva a cabo desde este código (no lo pongas en una función, sino que ha de ejecutarse siempre, así que colócala al final de todo el código (incluso después de </HTML>), que es el que sigue:
<script language="JavaScript">
cadena = location.search.substring(1);
var pos = cadena.indexOf("=");
var imagen = cadena.substring(pos+1);
document.all.imagen.src = imagen;
</script>
y el tag de la imagen será el siguiente:
<img name="imagen">
Espero que te haya quedado claro, sino ya sabes dónde encontrarme para las aclaraciones que precises.
Ya he introducido el código, me abre la ventana pop up correctamente, pero al abrirse la pop up me da un problema con la imagen y es que no me la carga, pongo lo que me has dicho en el código de la popup y pongo el código javascript al final del todo, después de </html>, mejor te pongo el código de la página popup
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="STYLESHEET" type="text/css" href="css/estilos.css">
<script language="javascript">
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<img name="imagen">
</body>
</html>
<script language="JavaScript">
<!--
cadena = location.search.substring(1);
var pos = cadena.indexOf("=");
var imagen = cadena.substring(pos+1);
document.all.imagen.src = imagen;
//-->
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="STYLESHEET" type="text/css" href="css/estilos.css">
<script language="javascript">
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<img name="imagen">
</body>
</html>
<script language="JavaScript">
<!--
cadena = location.search.substring(1);
var pos = cadena.indexOf("=");
var imagen = cadena.substring(pos+1);
document.all.imagen.src = imagen;
//-->
¿Las imágenes están en el mismo directorio que las páginas HTML?. Es que has de poner el path correcto hacia las imágenes o no las encontrará.
Respuesta de k3po
1
