Apariencia de la pagina a gusto del usuario

Jezebel · #1 (**permalink**) 25/04/2003, 13:24

Antes que nada, hola.

La idea es la siguiente:

Tengo una pagina base (esto es, la info, y un esquema del orden)
Quiero hacer la interfaz grafica, de tal manera que tenga 4 opciones diferentes. A lo que me refiero es que, dependiendo de que opcion eligio, me muestra un grafico diferente.
por ejemplo, si elige la opcion 1, me carga la pagina con un dibujo de un gato el el menu. y si elijo la opcion 2 en vez del gato me muestra el dibujo de un perro. Ambos dibujos tiene el mismo tamaño y estan en el mismo lugar.

Yo pense que a lo mejor existia algo para poner en el tag IMG, que dependiendo de la opcion que elige el que esta viendo la pagina muestre una imagen o la otra. algo asi:

<img if-opcion-1 src="gato.gif" if-opcion-2 src="perro.gif"></tag>

Le pido perdon a los moderadores, ya que al no saber como hacerlo o que necesitaria, no sabia donde poner este mensaje. Por favor sintanse libres de moverlo donde corresponda. Perdon por las molestias

JavierB · #2 (**permalink**) 25/04/2003, 13:51

Hola, Jezebel. bienvenido al Foro.

Mira este código a ver si te sirve de ayuda. Tienes que ponerlo en el lugar donde quieres que aparezca la imágen.

Código PHP:

  <script>

if (opcion1) imagen="im1.gif";

else imagen="im2.gif";

document.write('<img src="'+imagen+'"></img>');

</script>

Y no te preocupes. Yo creo que lo has preguntado en el Foro adecuado.

Saludos,

Jezebel · #3 (**permalink**) 25/04/2003, 13:59

Gracias Javier por la velocidad, creo que me va a gustar este foro

Eso es justo lo que necesitaba. Pero faltan unas cositas. Las opciones debe ser 4, pero eso se soluciona poniendo otro if luego del else, y asi hasta cuatro, no?, o hay alguna forma mas facil?.

Como hago para que elijan la opcion?. La idea es poner 4 link o imagenes y clickean la que quieren.

Y por ultimo, y aqui el porque de si estaba bien el foro o no. Como hago para, primero, comprobar que el usuario tenga los cookies activados, y de ser asi, que guarde la opcion que eligio para visitas futuras?

Se que estoy un poco exigente pero voy a intentar colaborar con el resto en cuanto se me presente posibilidad.

Gracias por su ayuda

Jezebel · #4 (**permalink**) 25/04/2003, 14:02

Una cosita mas, lo del <img src="'+imagen+'"></img> no lo puedo poner donde yo quiera?, me refiero a sacarlo de adentro del script y ponerlo dentro del body?, me explico?

Kaopectate · #5 (**permalink**) 25/04/2003, 14:15

Espera Jezebel a ver si te preparo un ejemplo.

Kaopectate · #6 (**permalink**) 25/04/2003, 14:25

Hola de nuevo, prueba con esto:

Código:

<html>
 <head>
  <script>
   function cambiaImagen(){
    var nSel;
    with (document.frm){
     imagen.src="imagen" + selector.value + ".jpg";
   }
  </script>
 </head>
 <body>
  <form name="frm">
   Seleccione su animal favorito:
   <select name="selector" onchange="cambiaImagen()">
    <option value="0">...Seleccione imagen</option>
    <option value="1">Perro</option>
    <option value="2">Gato</option>
    <option value="3">Cerdo</option>
    <option value="4">G. Bush</option>
   </select><br>
   <img name="imagen" src="imagen0.jpg">
  </form>
 </body>
</html>

Saludos.

Jezebel · #7 (**permalink**) 25/04/2003, 14:30

Si, parece ser lo que busco. Muchisimas gracias.
una duda, se guarda en cookies?

Kaopectate · #8 (**permalink**) 25/04/2003, 14:33

No, para las cookies te diría que abras otro hilo para preguntar eso específicamente. Yo no soy experto en cookies y ya que es un tema aparte, es comprensible que crees una pregunta nueva.

Saludos.

Jezebel · #9 (**permalink**) 25/04/2003, 14:44

Che, recien lo copie y pegue en el block de nots e hice un html, pero lo probe y no parece funcionar, hay que hacerle algo mas?

gracias por la paciencia

Kaopectate · #10 (**permalink**) 25/04/2003, 14:50

Tienes que poner en el mismo directorio donde coloques la página tus imágenes. En mi ejemplo necesitas cinco imágenes llamadas:

imagen0.jpg
imagen1.jpg
imagen2.jpg
imagen3.jpg
imagen4.jpg

Como imagen0.jpg deberías poner algo neutro, quizás una imagen del mismo tamaño que las demás pero del mismo color que el fondo o algo asi.

Otra opción es poner como imagen0.jpg una copia de alguna de las otras cuatro para que sirva de imagen por defecto.

Saludos.

Jezebel · #11 (**permalink**) 25/04/2003, 15:00

encontre el problema, habriste dos { pero cerraste uno solo. Donde hay que poner el otro }??

Kaopectate · #12 (**permalink**) 25/04/2003, 15:57

Quita el { de la linea del with y todo estara Ok.

Saludos.

Jezebel · #13 (**permalink**) 25/04/2003, 16:01

Por favor alguien que revise el codigo arriba dado y me diga donde va el } que falta, ya que al probarlo me dice que hay un error (justamente, que falta una } )

Kaopectate · #14 (**permalink**) 25/04/2003, 16:05

Ya te respondí Jezebel, quita el { de la linea del with y mas nada.

Jezebel · #15 (**permalink**) 25/04/2003, 16:08

ups, grax

Jezebel · #16 (**permalink**) 25/04/2003, 16:11

perfecto, funciona de maravilla. Como puede adaptar esto a varias imagenes en una misma pagina?, me refiero a que se cambien todas al mismo tiempo al seleccionar una opcion

Kaopectate · #17 (**permalink**) 25/04/2003, 16:30

Voy sin probarlo, es mas o menos asi:

Código PHP:

  <html>

 <head>

  <script>

   function cambiaImagen(){

    var nSel;

    with (document.frm){

     imagend.src=imagenc.src;

     imagenc.src=imagenb.src;

     imagenb.src=imagena.src;

     imagena.src="imagen" + selector.value + ".jpg";

    }

   }

  </script>

 </head>

 <body>

  <form name="frm">

   Seleccione su animal favorito:

   <select name="selector" onchange="cambiaImagen()">

    <option value="0">...Seleccione imagen</option>

    <option value="1">Perro</option>

    <option value="2">Gato</option>

    <option value="3">Cerdo</option>

    <option value="4">G. Bush</option>

   </select><br>

   <img name="imagena" src="imagen0.jpg">

   <img name="imagenb" src="imagen0.jpg">

   <img name="imagenc" src="imagen0.jpg">

   <img name="imagend" src="imagen0.jpg">

  </form>

 </body>

</html>

Saludos.

Jezebel · #18 (**permalink**) 25/04/2003, 16:49

Entiendo la idea, solo que hay que hacer un cambio

esto:

imagend.src=imagenc.src;
imagenc.src=imagenb.src;
imagenb.src=imagena.src;
imagena.src="imagen" + selector.value + ".jpg";

hay que cambiarlo de orden asi:

imagena.src="imagen" + selector.value + ".jpg";
imagenb.src=imagena.src;
imagenc.src=imagenb.src;
imagend.src=imagenc.src;

al leerlo de arriba para abajo no lograba el efecto deseado.

Espectacular, Kaopectate, lograste resolverlo. Ahora solo falta que me cruze con alguien que sepa de cookies...

MIL GRACIAS FOROS DEL WEB

tunait · #19 (**permalink**) 25/04/2003, 17:11

que quieres hacer con las cookies?

Jezebel · #20 (**permalink**) 26/04/2003, 14:51

Tunait: La idea es poner, al lado del menu desplegable, un OPTION, que si lo marcan, les grabe una cookie para que no tengan que volver a elegir del menu desplegable la proxima vez que entren a mi pagina.

JavierB · #21 (**permalink**) 27/04/2003, 04:11

Hola, Jezebel.

Ahí van unas líneas de código, por si sirven de ayuda:

Código PHP:

  <html>

<head>

<script>

var validez = 30;

  var caduca = new Date(); 

  caduca.setTime(caduca.getTime() + (validez*24*60*60*1000));

 
  function leeCookie(name){

    var cname = name + "=";               

    var dc = document.cookie;             

    if (dc.length > 0) {              

      begin = dc.indexOf(cname);       

      if (begin != -1) {           

        begin += cname.length;       

        end = dc.indexOf(";", begin);

        if (end == -1) end = dc.length;

          return unescape(dc.substring(begin, end));

      } 

    }

    return null;

  }

 
  function escribeCookie(name, value, expires) {

    document.cookie = name + "=" + escape(value) + 

    ((expires == null) ? "" : "; expires=" + expires.toGMTString());

  }

    

    function ini() {

        opc=leeCookie('opcion');

        if (opc!=null)

            document.getElementById('sel').selectedIndex=opc;

    }

</script>

 
</head>

 
<body onLoad="ini()">

<select id="sel" onChange="escribeCookie ('opcion',this.selectedIndex)">

<option value="1">uno</option>

<option value="2">dos</option>

<option value="3">tres</option>

</select>

</body>

</html>

En este ejemplo se graba la cookie al cambiar el select, pero creo que no te costará mucho adaptarlo a tus necesidades.

Saludos,

Jezebel · #22 (**permalink**) 27/04/2003, 14:11

Donde puedo encontrar un tutorial de como grabar y leer cookies?

Jezebel · #23 (**permalink**) 27/04/2003, 19:58

JavierB: El script que me diste es aun mejor, que se cree el cookie automatico. Pero tengo un problema con lo de la expiracion. Si cierro el explorador y despues entro de nuevo a la pagina el script desaparece, como soluciono eso?

De vuelta con el script de la imagenes, como puedo hacer lo mismo con una imagen que esta de fondo de una celda?

JavierB · #24 (**permalink**) 28/04/2003, 02:47

Hola de nuevo.

Se me había pasado alguna cosilla. A ver si con esto te marcha:

<select id="sel" onChange="escribeCookie ('opcion',this.selectedIndex,caduca )">

Fijate que al principio del script tienes una variable llamada "validez" a la que se ha dado un valor de 30. Esto quiere decir que la cookie expirará a los 30 días. Cambiala a tu gusto.

Saludos,