Cambiar estilo dinamicamente

JavierB · #1 (**permalink**) 09/04/2002, 11:21

Hola, Foro.

Supongamos que tengo definidos dos estilos:

Código:

&lt;style type=&quot;text/css&quot;&gt;
	td.c1 {background-color:red; border:1px solid blue}
	td.c2 {background-color:blue; border:1px solid red}
&lt;/style&gt;

Al diseñar la página le asigno a una celda el estilo c1. ¿Se podría hacer que al pasar el ratón pon encima se asignara el estilo c2?

Gracias por anticipado. Saludos,

---------------
Pregunta lo que ignoras y pasarás por ton.to 5 minutos.
No lo preguntes y serás ton.to toda la vida.

bet · #2 (**permalink**) 09/04/2002, 14:28

Código:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt; New Document &lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
	.c1 {background-color:red; border:1px solid blue}
	.c2 {background-color:blue; border:1px solid red}
&lt;/style&gt;

&lt;script language=&quot;JavaScript&quot;&gt;
&lt;!--
function cambio(item,bg){
	item.style.backgroundColor = bg;
	}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body bgcolor=&quot;#FFFFFF&quot;&gt;
&lt;table width=&quot;50%&quot; border=1&gt;
&lt;tr&gt;
	&lt;td class=&quot;c1&quot; onMouseOver=&quot;cambio(this,'blue');&quot; onMouseOut=&quot;cambio(this,'red');&quot;&gt; 
		Campo de una tabla con cambio&lt;/td&gt;
	&lt;td class=&quot;c2&quot;&gt; este es un campo común&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

<hr noshade size=1><img src="http://www.gograph.com/Images-8712/ClipArt/cat03.gif" height="50" border=0 align="absmiddle"> <font size="2" face="verdana" color="#000000">bet[/CODE]

JavierB · #3 (**permalink**) 10/04/2002, 07:07

Hola, bet. Gracias por contestar.

Esa forma de cambiar las propiedades ya la conocía, lo que ocurre es que son varias propiedades (lo que puse en el anterior mensaje es solo un ejemplo). Yo quería, si se puede, que me temo que no, cambiar el estilo, es decir cambiar todo a la vez.

Gracias de nuevo. Saludos,

caricatos · #4 (**permalink**) 10/04/2002, 15:49

Hola:
La respuesta es tan sencilla como poner
<td id=c1 onmouseover=this.className=c2
onmouseout=this.className=c1 >...</td>
Si te fijas en mi página <a href='ir.asp?http://www.sucaricatura.com' target='_blank'>http://www.sucaricatura.com...</a>, el menú de la derecha funciona cambiando el estilo con este truco.
Espero que te sirva...

caricatos · #5 (**permalink**) 10/04/2002, 18:05

Perdón, lo que quise decir en el mensaje anterior es class=c1 en vez de id=c1 al comienzo de la etiqueta...

JavierB · #6 (**permalink**) 11/04/2002, 02:33

Hola, caricatos.

Eso es precisamente lo que estaba buscando. Faltan un par de apostrofes en el código (onMouseOver=this.className='c2') y funciona de maravilla.

Muchas gracias por tu respuesta. Saludos,