Como cambiar el fondo de una tabla con javascript

Jezebel · #1 (**permalink**) 11/05/2003, 10:56

La idea es la siguiente. Tengo una imagen y un cuadro de seleccion. Segun la opcion que eliga del cuadro de seleccion, la URL de la imagen va a ser distinta. El script es el siguiente:

<SCRIPT>
function cambiaimagen(){
var nSel;
with (document.frm){
Titulo .src="Titulo" + selector.value + ".jpg";
Borde .src="Borde" + selector.value + ".jpg";
}
}
</SCRIPT>

//Lo que esta en negrita es el nombre de la imagen que quiero cambiar

<BODY bgcolor="#000000" onload="cambiaimagen()">
<SELECT NAME="selector" ONCHANGE="cambiaimagen()>
<OPTION VALUE="1" SELECTED>1</OPTION>
<OPTION VALUE="2">2</OPTION>
</SELECT>
<IMG NAME="Titulo">
<IMG NAME="Borde">

Este script me sirve si las imagenes pueden tener nombre, pero si quiero cambiar una imagen que este de fondo en una tabla, COMO HAGO?, Porque no le puedo poner nombre, o si?

caricatos · #2 (**permalink**) 11/05/2003, 11:49

Hola Jezebel:

Puedes hacerlo cambiando la imagen style.backgroundImage, o cambiando la clase...

Voy a poner el ejemplo cambiando la clase...
para esta tabla:
<table id=tabla class=normal><tr>....

puedes crear unos estilos así:

<style
.campo1{background-image:url(campo1.gif)}
.campo2{background-image:url(campo2.gif)}
.ciudad{background-image:url(ciudad.gif)}

lo que deberías poner en el select sería algo así:
<select onchange="document.getElementById'tabla').classNam e=this.value">
<option value=campo1>campo1</option>
<option value=campo2>campo2</option>
<option value=ciudad>ciudad</option>
</select>

Espero que te sirva

Saludos

Jezebel · #3 (**permalink**) 11/05/2003, 15:00

Caricatos: antes que nada gracisas por tu tiempo.
La verdad es que no se mucho de los STYLES, en realidad no se mucho de nada. Estoy intentando que me quede lo mas simple posible, y me preguntaba si no se podia ponerle un id al <TD> de la tabla al que le quiero cambiar el fondo. Si se puede (supongo que si) ¿como hago para poner dentro del script otra linea que afecte al fondo del <TD>.?
No se algo como:
tabla.background-image.src=
o algo asi. Lo que ocurre es que como voy a cambiar muchas imagenes, necesito que quede simple, para poder ponerlo en todas las paginas, entendes?.
Se te ocurre alguna forma?

CARICATOS: OLVIDATE DEL MENSAJE ANTERIOR

yo tengo esto:

<STYLE type="text/css">
.fondo { background-image: url(fondo.jpg)}
</STYLE>

<SELECT NAME="selector">
<OPTION VALUE="1" SELECTED>fondo nro 1</OPTION>
<OPTION VALUE="2">fondo nro 2</OPTION>
</SELECT>

<TD CLASS=fondo>

como hago para que al nombre de la imagen le agregue un "selector.value". Osea, yo quiero que la url de mi imagen sea

url("fondo" + selector.value + ".jpg")

cosa que si selecciono la primera oopcion la url sea FONDO1.JPG, pero si selecciono la segunda opcion sea FONDO2.JPG

Se entiende?, como lo hago?

Tuve otra idea:

tengo esto

<TD CLASS=fondo WIDTH=600 VALIGN=TOP>

en vez de "CLASS=fondo" puedo poner "CLASS=selector.value" y que me lo tome como selector.value?, osea, que me cambie el nombre en la class segun los value del selector y por ende que lea un estilo diferente?

caricatos · #4 (**permalink**) 12/05/2003, 03:04

Hola otra vez:

No me he conectado desde ayer, y veo que has evolucionado algo...

Para fondos de cualquier etiqueta de un body, es casi obligado usar estilos (creo que solo el body tiene la posibilidad de usar atributos, aunque no me iré mucho por las ramas para no liarte...)

Si piensas usar el mismo estilo en distintas páginas, te recomiendo que uses ficheros aparte con el mismo contenido que se encierra entre las etiquetas style (sin estas etiquetas), y poner en el head de las páginas un tag link tal como sigue:

<link rel=stylesheet type="text/css" href="estilos.css">

donde estilos.css tenga un contenido como éste:

Código PHP:

  .fondo1{background-image:url(fondo1.jpg)} 
.fondo2{background-image:url(fondo2.jpg)} 
.fondo3{background-image:url(fondo3.jpg)}

La clase inicial de un elemento no creo que se pueda asignar como tu dices, aunque si puedes asignarla mediante el onload del body o mediante un script en el mismo body...

La forma de variar la clase con el select es lo que puse en primer lugar, y si en vez de cambiar la clase entera quisieras cambiar solo la imagen también se puede, pero mejor vamos por partes, y cuando tengas esto arreglado, te comentaré lo de cambiar solo la imagen...

Desde un script, se cambia el atributo class, mediante className (fíjate en la "N" mayúscula, ya que en los script´s las mayúsculas son importantes)

La verdad es que no tengo claro por donde vas, así que cuando me lo digas, seguiré ayudándote...

Saludos

Jezebel · #5 (**permalink**) 12/05/2003, 14:57

Caricatos: Muchas gracias por la paciencia

. Creo que lo mejor seria explicarte bien lo que quiero. La idea seria esta:

Tengo una pagina base (en cuanto a diseño, informacion, etc)

Lo que quiero es poner un select para que el usuario pueda elegir la ambientacion de la pagina (en mi caso 4 ambientaciones distintas). Lo que cambiaria de ambientacion a ambientacion son solamente los graficos. Debido a que son varias paginas, queria desarrollar una forma facil de lograrlo, esto es, como vos decias, los 4 estilos en un css y una forma facil de cambiar de uno a otro (facil para mi).

Otra cosa que pense en base a lo que me dijiste de los css.

En un css pongo los diferentes estilos asi

Código PHP:

  .estilo1 
.estilo2 
.estilo3

En el class=XXX de cada cosa intente poner (en lugar de XXX) selector.value, y en el valor de cada opcion del selector, "estilo1", "estilo2", "estilo3", etc.

Pero bueno, no sirvio. Lo que intento hacer es algo asi de simple, cosa de implementarlo en todas las paginas con la simple accion de copiar y pegarle a cada cosa un class=, y listo.

¿Tenes alguna idea de como puede ser?, otra pregunta, ¿No te hartas de que un boludo (que es muy poco probablemente que te pueda ayudar en algo) te atocigue con preguntas esperando respuestas magicas?, si tu contestacion a la primera fue SI y a la segunda fue NO, me alegraste la semana...

caricatos · #6 (**permalink**) 13/05/2003, 05:02

Jezebel: Voy a alegrarte la semana...

No me importa que me hagan preguntas, y siempre espero dar respuestas mágicas...

Lo que te dije sé que funciona... seguro que te faya alguna cosa sencilla, y sólo es cuestión de encontrar ese fallo.

Voy a prepararte un ejemplito para que lo pruebes, y te cuento...

Ahora tengo que salir, pero cuando pueda te lo hago.

Saludos

Hola otra vez:

Éste es el código:

Código PHP:

  <html> 
<head> 
<title> 
    Fondos a la carta 
</title> 
<style type="text/css"> 
.fondo1 
    { 
    background-color: white; 
    background-image: url(fondo1.jpg); 
    background-repeat: repeat-y; 
    background-position: left;     
    color: black; 
    } 
.fondo2 
    { 
    background-image: url(x_Silvestre1b.gif); 
    background-repeat: no-repeat; 
    background-position: top right;     
    background-attachment: fixed; 
    background-color: salmon; 
    color: cyan; 
    } 
.fondo3 
    { 
    background: white url(UMA.gif) no-repeat center center; 
    background-attachment: fixed; 
    } 
</style> 
<title> 
    Celda 
</title> 
</head> 
<body >  
<select onchange="if (this.selectedIndex > 0) document.body.className = this.value"> 
<option value="">Seleccione un fondo</option> 
<option value=fondo1>Fondo de sucaricatura.com</option> 
<option value=fondo3>Fondo para la Universidad de Málaga</option> 
<option value=fondo2>Fondo con Silvestre</option> 
</select> 
<br> 
<script> 
for (var i = 0; i < 250; i ++) document.write("Texto sin sentido filosófico... "); 
</script> 
</body>  
</html>

... y puedes verlo aquí ...

Lo puse en el body, pero si lo quieres para una tabla o celda, tienes que ponerle un atributo id, y en vez de document.body, poner document.getElementById("el_ID")...

Saludos

Jezebel · #7 (**permalink**) 14/05/2003, 19:11

Unos detallesitos:

Como hago para poner mas de una cosa?, con que los separo?

y lo del document.getElementById, va asi o document.getelemntbyid.classname, porque lo probe de las dos formas y no me anduvo.

Definitivamente es todo un avance, gracias

caricatos · #8 (**permalink**) 15/05/2003, 10:53

Hola otra vez:

Sobre el uso de getElementById lo básico es que cuando quieras usarlo debe ser sobre un elemento donde esté definido el atributo ID... aunque no es obligatorio, te recomiendo que no esté repetido...

Te pondré un ejemplo de modificación de la clase de una tabla...

<table id=tabla class=fondo1><tr><td>Contenido de la celda</td></tr></table>

Un script para cambiar la clase por fondo2 sería:

document.getElementById("tabla").className = "fondo2";

En mi ejemplo anterior puse distintos modos de poner un fondo... con una imagen centrada y estática, con la imagen repetida verticalmente y alineada a la izquierda...
En la misma clase pudes definir tipos de letras, alineaciones, colores, visibilidad, tamaño, posición... pero no creo que se trate de eso tu pregunta... ese tema sería para estilos (CSS)

Saludos

Jezebel · #9 (**permalink**) 15/05/2003, 17:37

Solucionado lo del get element. Me daba error porque habia comillas dentro de comillas, asi que reemplaze y puse '. Me quedo asi:

<select onchange="if (this.selectedIndex > 0) document.getElementById(' tabla' ).className = this.value">

Pero aun tengo la incognita de como poner mas de un elemento. Porque ese parrafo solo me sirve para el elemento tabla, pero si yo quiero mas elementos que ese no puedo. Como hago?

(Gracias por la paciencia)

caricatos · #10 (**permalink**) 16/05/2003, 01:36

Hola otra vez:

Fíjate que hay un "if" en el onchange... también puees poner el else, y añadir código, o poner esas cosas en una función...

Ejemplo:

<select onchange="if (this.selectedIndex > 0) {document.getElementById(' tabla' ).className = this.value; document.getElementById(' tabla2' ).className = this.value;}">

En este caso se deben poner llaves encerrando todas las instrucciones. o hacer una función y puedes ponerle el parámetro this.value...

Cuando tengas algo, dame un aviso y te ayudo.

Saludos