catálogo ropa

herni · #1 (**permalink**) 08/10/2004, 17:48

Hola,

Estoy haciendo un catálogo de ropa. Cada prenda está disponible en varios colores y ya he hecho que se vean las imagenes de la prenda en los diferentes colores al elegir el color en una lista, pero quiero que se pueda abrir una ventana pop up al pulsar sobre las imágenes en su color para ver la prenda en grande y no lo consigo. Sólo consigo abrir una de un color y no se cómo hacerlo con las demás. Si alguien puede ayudarme, muchas gracias de antemano.

Un saludo

PD-El codigo actual es el siguiente:

<FORM>
<p align="center"><font color="#666666" size="1" face="Arial, Helvetica, sans-serif">T-SHIRT "LOGO 1" </font><font color="#666666" size="1" face="Arial, Helvetica, sans-serif"></font></p>
<p align="center"><IMG SRC="../img/TS0001BLK_peq.jpg" NAME="imagen" WIDTH=179 HEIGHT=161 BORDER=0 class="mano" onclick="MM_openBrWindow('TS0001BLK.html','TS0001B LK','width=600,height=600')"> </p>
<p align="center">
<SELECT NAME="lista" SIZE=1 onChange ="if (Validar(3.0,4.0)) imagen.src=form.lista.options[form.lista.selectedIndex].value;">
<OPTION VALUE="../img/TS0001BLK_peq.jpg" selected>black
<OPTION VALUE="../img/TS0001ARM_peq.jpg">army
<OPTION VALUE="../img/TS0001NVY_peq.jpg">navy
<OPTION VALUE="../img/TS0001ORG_peq.jpg">orange
<OPTION VALUE="../img/TS0001RED_peq.jpg">red
</SELECT>
</p>
</FORM>

caricatos · #2 (**permalink**) 08/10/2004, 18:40

Hola herni, bienvenido a los foros

:

Para lo que quieres tendrías que poner en el value de cada option los dos ficheros (la miniatura y la que se vría en el popup) y de alguna manera pasarle al tag img la URL de la grande, puedes crearte atributos o usar alguno estándar del tag img como alt o title.

Prueba esto:

<SELECT NAME="lista" SIZE=1 onChange ="document.images["imagen"].src=this.value.split(',')[0]; document.images["imagen"].alt=this.value.split(',')[1]">
<OPTION VALUE="../img/TS0001BLK_peq.jpg,../img/TS0001BLK_gra.jpg" selected>black</option>
<OPTION VALUE="../img/TS0001ARM_peq.jpg,../img/TS0001ARM_gra.jpg">army</option>
<OPTION VALUE="../img/TS0001NVY_peq.jpg,../img/TS0001NVY_gra.jpg">navy</option>
<OPTION VALUE="../img/TS0001ORG_peq.jpg,../img/TS0001ORG_gra.jpg">orange</option>
<OPTION VALUE="../img/TS0001RED_peq.jpg,../img/TS0001RED_gra.jpg">red</option>
</SELECT>

y en la imagen:

<IMG SRC="../img/TS0001BLK_peq.jpg" NAME="imagen" WIDTH=179 HEIGHT=161 BORDER=0 class="mano" onclick="ampliar(this.alt,'width=600,height=600')" >

Y para terminar la función ampliar sería:
function ampliar(foto, opciones) {
ventana = window.open("", "", opciones);
ventana.document.open();
ventana.document.write("<html><body style='background-image:url(" + foto + ")' ></body></html>");
ventana.document.close();
}

No lo he probado, pero espero que te sirva.

Saludos

herni · #3 (**permalink**) 09/10/2004, 11:58

Muchísimas gracias por tu rápida respuestaCaricatos. Lo he puesto como he entendido que me decías y funciona pero la ventana que se abre está vacía. Yo ya tengo creadas páginas con la imagen grande y el boton de cerrar la ventan (TS0001BLK.html, TS0001ARM.html, etc.), no se si tengo que ponerlas en el código o qué es lo que falla.

Ahora mismo lo tengo así:

<p align="center"><font color="#666666" size="1" face="Arial, Helvetica, sans-serif">T-SHIRT "LOGO 1" </font><font color="#666666" size="1" face="Arial, Helvetica, sans-serif"></font></p>
<p align="center"><IMG SRC="../img/TS0001BLK_peq.jpg" NAME="imagen" WIDTH=179 HEIGHT=161 BORDER=0 class="mano" onclick="ampliar(this.alt,'width=600,height=600')" > </p>
<p align="center">
<SELECT NAME="lista" SIZE=1 onChange ="if (Validar(3.0,4.0)) imagen.src=form.lista.options[form.lista.selectedIndex].value;">
<OPTION VALUE="../img/TS0001BLK_peq.jpg","../img/TS0001BLK_gra.jpg" selected>black</option>
<OPTION VALUE="../img/TS0001ARM_peq.jpg","../img/TS0001ARM_gra.jpg">army</option>
<OPTION VALUE="../img/TS0001NVY_peq.jpg","../img/TS0001NVY_gra.jpg">navy</option>
<OPTION VALUE="../img/TS0001ORG_peq.jpg","../img/TS0001ORG_gra.jpg">orange</option>
<OPTION VALUE="../img/TS0001RED_peq.jpg","../img/TS0001RED_gra.jpg">red</option>
</SELECT>
</p>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Gracias y un saludo.

caricatos · #4 (**permalink**) 09/10/2004, 12:16

Hola otra vez:

Me parece que no coincidirán los nombres...

Por cada nombre de miniatura con "_peq" dentro del nombre supuse que la foto ampliada sería la misma pero cambiando "_peq" por "_gra".

En los valúes de cada option, tienes que poner el nombre de la foto inmediatamente detrás de la coma... o sea una cadena con la imagen en pequeño, una coma y la imagen grande... de esa manera te ahorrarás las páginas que tienes hechas...

Aunque si quieres usarlas sería esa URL lo que debería ir detrás da la coma, pero ya habría que modificar el script ampliar.

Prueba lo que te he dicho, y si quieres usar tus páginas, avisa para indicarte las modificaciones que tendrías que hacer.

Saludos

herni · #5 (**permalink**) 09/10/2004, 14:40

Hola,
Quería usar las páginas porque quiero las ventanas pop up sin barra arriba y con botón de "close window", y acertaste con los nombres de las fotos y el "_gra", pero no me funciona. No se si será por la parte de abrir la ventana.
Gracias otra vez.

Herni

herni · #6 (**permalink**) 12/10/2004, 05:41

Hola otra vez.

Quería usar las páginas porque quiero las ventanas pop up sin barra arriba y con botón de "close window", y acertaste con los nombres de las fotos y el "_gra", pero no me funciona. No se si será por la parte de abrir la ventana.

Gracias y un saludo.

caricatos · #7 (**permalink**) 12/10/2004, 11:09

Hola otra vez:

He revisado los códigos y he encontrado algunos errores:

En mi primera respuesta anidé mal las comillas del evento:

<SELECT NAME="lista" SIZE=1 onChange ="document.images["imagen"].src=this.value.split(',')[0]; document.images["imagen"].alt=this.value.split(',')[1]">

Debería ser:

<SELECT NAME="lista" SIZE=1 onChange ="document.images['imagen'].src=this.value.split(',')[0]; document.images['imagen'].alt=this.value.split(',')[1]">

Luego los "option" deben tener una sóla cadena

<OPTION VALUE="../img/TS0001BLK_peq.jpg","../img/TS0001BLK_gra.jpg" selected>black</option>

Debería ser:

<OPTION VALUE="../img/TS0001BLK_peq.jpg,../img/TS0001BLK_gra.jpg" selected>black</option>

A partir de esos arreglos, en la imagen se cambia el src y el alt...

Por eso en el evento onclick de la imagen se pasa como parámetro el atributo alt de la imagen (Si quieres que alt no varía tendrías que usar otro atributo... pero eso lo podemos dejar para otro momento)

Ahora si quieres que se abran las páginas que tienes ya hechas, pon en los values de los options la URL de la página detrás de la primera coma, y la función ampliar quedaría:

function ampliar(foto, opciones) {
ventana = window.open(foto, "", opciones);
}

Saludos

caricatos · #8 (**permalink**) 12/10/2004, 11:38

Hola otra vez:

Puedes probar el código en esta página: http://www.pepemolina.com/probador/index.html

Prueba con este código, ya que las miniaturas y las imágenes grandes existen:

Código:

<html>
<head>
</head>
<script>
function ampliar(foto, opciones) {
ventana = window.open("", "", opciones);
ventana.document.open();
ventana.document.write("<html><body style='background-image:url(" + foto + ")' ></body></html>");
ventana.document.close();
}

</script>
<body>
<IMG SRC="../imagenes/fotos/mini/Diapositiva52.jpg" NAME="imagen" BORDER=0 class="mano" onclick="ampliar(this.alt,'width=640,height=480')" alt="../imagenes/fotos/maxi/Diapositiva52.jpg">

<SELECT NAME="lista" SIZE=1 onChange="document.images['imagen'].src=this.value.split(',')[0]; document.images['imagen'].alt=this.value.split(',')[1]">
<OPTION VALUE="../imagenes/fotos/mini/Diapositiva52.jpg,../imagenes/fotos/maxi/Diapositiva52.jpg" selected>1</option>
<OPTION VALUE="../imagenes/fotos/mini/Diapositiva62.jpg,../imagenes/fotos/maxi/Diapositiva62.jpg">2</option>
<OPTION VALUE="../imagenes/fotos/mini/Diapositiva66.jpg,../imagenes/fotos/maxi/Diapositiva62.jpg">3</option>
<OPTION VALUE="../imagenes/fotos/mini/Diapositiva73.jpg,../imagenes/fotos/maxi/Diapositiva62.jpg">4</option>
<OPTION VALUE="../imagenes/fotos/mini/Diapositiva81.jpg,../imagenes/fotos/maxi/Diapositiva62.jpg">5</option>
</SELECT>

</body>
</html>

Saludos

herni · #9 (**permalink**) 12/10/2004, 11:59

Muchísimas gracias, ¡¡¡ya me funciona!!! Y justo como yo quería.

Un saludo,

Hernán

herni · #10 (**permalink**) 12/10/2004, 13:27

Hola otra vez,

Una última cosa: Funciona bien, pero cuando pulso por primera vez en la imagen pequeña sin haber cambiado antes la selección, la ventana con mi página se abre en blanco, sin ninguna imagen. En cuanto cambio la selección ya se abren bien.

Y otra cosa: Si tengo una página con un marco arriba y 3 pestañas de selección hechas con flash que llaman a su página correspondiente en el marco inferior, y mediante otros botones externos quiero acceder a esa página en cada una de sus tres versiones, ¿puedo hacerlo?

Loo que quiero es que ese botón externo me envíe a esa página de nmarcos pero con la pestaña seleccionada que yo quiera y el marco correspondiente abajo.

Gracias otra vez,

Herni

caricatos · #11 (**permalink**) 13/10/2004, 03:11

Hola otra vez:

Sobre la primera pregunta, ya lo había notado y en el ejemplo que te puse para que probaras estaba solucionado...

Tan solo tienes que poner en la imagen el atributo alto con la URL de la página que tiene que abrir (si te decantaste por esa opción)

Sobre el segundo tema te recomiendo que crees un nuevo tema (porque es algo distinto)

Supongo que tendrás que enviar parámetros a la página (cosa contemplada en las FAQs) y según el parámetro lanzar un script con el parámetro adecuado, pero si no te sirve esta explicación te recomiendo que crees un nuevo tema, ya que particularmente no dispongo de mucho tiempo y seguramente alguien más pueda ayudarte.

Saludos

herni · #12 (**permalink**) 13/10/2004, 06:31

Podrías detallarme dónde tengo que poner la URL? La verdad es que no tengo ni idea, ya lo habrás notado...

Sobre la otra pregunta ahora mismo abro otro tema.

Gracias por todo, es una suerte que existan foros como éste.

Un saludo,

Herni

caricatos · #13 (**permalink**) 13/10/2004, 12:40

Hola otra vez:

Me fijé en el anterior mensaje y se me coló una "o" ...

donde puse el atributo alto quise decir el atributo alt ...

<IMG SRC="..." NAME="imagen" BORDER=0 class="mano" onclick="ampliar(this.alt,'width=640,height=480')" alt="tuPágina">

Saludos

herni · #14 (**permalink**) 13/10/2004, 17:07

Muchísimas gracias, ahora sí que funciona a la perfección.

Un saludo,

Herni