Foros del Web » Diseño web » HTML »

Cambiar estilo dinamicamente

Estas en el tema de Cambiar estilo dinamicamente en el foro de HTML en Foros del Web. Hola, Foro. Supongamos que tengo definidos dos estilos: Código: <style type="text/css"> td.c1 {background-color:red; border:1px solid blue} td.c2 {background-color:blue; border:1px solid red} </style> Al diseñar la ...
  #1 (permalink)  
Antiguo 09/04/2002, 11:21
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 2 meses
Puntos: 764
Cambiar estilo dinamicamente

Hola, Foro.

Supongamos que tengo definidos dos estilos:
Código:
<style type="text/css">
	td.c1 {background-color:red; border:1px solid blue}
	td.c2 {background-color:blue; border:1px solid red}
</style>
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.
  #2 (permalink)  
Antiguo 09/04/2002, 14:28
bet
 
Fecha de Ingreso: febrero-2001
Mensajes: 292
Antigüedad: 13 años, 2 meses
Puntos: 0
Re: Cambiar estilo dinamicamente

Código:
<html>
<head>
<title> New Document </title>
<style type="text/css">
	.c1 {background-color:red; border:1px solid blue}
	.c2 {background-color:blue; border:1px solid red}
</style>

<script language="JavaScript">
<!--
function cambio(item,bg){
	item.style.backgroundColor = bg;
	}
//-->
</script>
</head>

<body bgcolor="#FFFFFF">
<table width="50%" border=1>
<tr>
	<td class="c1" onMouseOver="cambio(this,'blue');" onMouseOut="cambio(this,'red');"> 
		Campo de una tabla con cambio</td>
	<td class="c2"> este es un campo común</td>
</tr>
</table>
</body>
</html>
<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]
  #3 (permalink)  
Antiguo 10/04/2002, 07:07
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 2 meses
Puntos: 764
Re: Cambiar estilo dinamicamente

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,
  #4 (permalink)  
Antiguo 10/04/2002, 15:49
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.945
Antigüedad: 12 años
Puntos: 1101
Re: Cambiar estilo dinamicamente

Hola:
La respuesta es tan sencilla como poner
&lt;td id=c1 onmouseover=this.className=c2
onmouseout=this.className=c1 &gt;...&lt;/td&gt;
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...
  #5 (permalink)  
Antiguo 10/04/2002, 18:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.945
Antigüedad: 12 años
Puntos: 1101
Re: Cambiar estilo dinamicamente

Perdón, lo que quise decir en el mensaje anterior es class=c1 en vez de id=c1 al comienzo de la etiqueta...
  #6 (permalink)  
Antiguo 11/04/2002, 02:33
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 2 meses
Puntos: 764
Re: Cambiar estilo dinamicamente

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,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:01.
SEO by vBSEO 3.3.2