Foros del Web » Creando para Internet » CSS »

Cambiar color de fondo de una celda usando estilos???????

Estas en el tema de Cambiar color de fondo de una celda usando estilos??????? en el foro de CSS en Foros del Web. Quien me puede dar una manito !! Lo que necesito es algo super simple. Tengo una tabla que tiene enlaces y lo que deseo es ...
  #1 (permalink)  
Antiguo 08/07/2004, 19:39
 
Fecha de Ingreso: noviembre-2002
Mensajes: 21
Antigüedad: 15 años
Puntos: 0
Cambiar color de fondo de una celda usando estilos???????

Quien me puede dar una manito !!
Lo que necesito es algo super simple. Tengo una tabla que tiene enlaces y lo que deseo es que el color de fondo cambien cuando el raton pasa enciam. Eso funciona bien simple asi:

<td onMouseOver="this.bgColor='#DCDCDC'" onMouseOut="this.bgColor='#CDCDCD'"><a href="/us/products/mcafee/antivirus/category.htm" class="textBoldBlack">Anti-Virus</a></td>



Pero lo que necesito es reeemplazar el color "#DCDCDC" por un estilo, pues esto estara en muchas paginas y quizas cambiemos los colores frecuentement. Si lo tengo definido en un estilo solo cambiare el archivo CSS.
Tengo solo una hora mas para hacerlo. He tratado esto pero nose porque no me funciona:

<td onMouseOver="this.background-Color='miestilo'" onMouseOut="this.style.backgroundColor='miotroesti lo'" >
<a href="/us/products/mcafee/antispam/category.htm" class="textBoldBlack">Anti-Spam</a></td>

POr favor ayudenme!!!!!!!!!!!

Muchas gracias de antemano
__________________
Junior ASP Programmer
  #2 (permalink)  
Antiguo 08/07/2004, 20:45
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
td.toto {background-color:blue; }

</head>
<body>
<table>
<tr>
<td onmouseover="this.className='toto'" onmouseout="this.className=''" >cell</td>
</tr>
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #3 (permalink)  
Antiguo 09/07/2004, 11:52
 
Fecha de Ingreso: noviembre-2002
Mensajes: 21
Antigüedad: 15 años
Puntos: 0
Muchas gracias PascalC ,trate de usar el metodo classname, solo que el estilo que defini no era una subclase de td.
Ahora funciona muy bien, lo unico es que con Netscape eso no se refleja es que siempre Netscape nos va a dar dolores de cabeza..???(disculpen por los que usan Netscape), pero ahora como lo resuelvo????.
Tengo que modificar el codigo y si es Netscape (algo) sino algo?????
__________________
Junior ASP Programmer
  #4 (permalink)  
Antiguo 10/07/2004, 09:52
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
Uso Netscape y lo veo muy buen :) De hecho nunca uso IE. No utilizaras alguna vrsion del siglo pasado ? porque tampoco funciona con IE3 ;)e
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #5 (permalink)  
Antiguo 16/09/2004, 11:25
Avatar de estebanpc  
Fecha de Ingreso: septiembre-2004
Mensajes: 48
Antigüedad: 13 años, 2 meses
Puntos: 0
cambio de color de todas las celdas

Tengo una pregunta relacionada al tema.

Quiero que a la hora de pasar el mouse sobre celdas, éstan cambien de color (como en el ejemplo que mostró Pascal).

Ahora mi problema es el siguiente.

Tengo una hoja muy grande y al poner esto:

<td onmouseover="this.className='toto'" onmouseout="this.className=''" >cell</td>

en todas y cada una de las celdas, haria demasiado pesado la pagina.

Mi pregunta es:

No puedo llamar al estilo para determinadas celdas, como por ejemplo asi:

<td class="xxxxxx">cell</td>

Y esta celda tendria el efecto del cambio de color.

Me entienden?
  #6 (permalink)  
Antiguo 16/09/2004, 11:38
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
Sí, y en realidad ni siquiera necesitas una class, pero el problema es que lo entienden todos los navegadores... menos Internet Explorer que solo soporta :hover sobre las etiquetas <a> y no sobre todas las etiquetas como lo dice la norma CSS.

la idea es la siguiente :
CSS

table#prueba td {background-color:gray;}
table#prueba td:hover {background-color:red;}

HTML
<table id="prueba">
<tr>
<td>item</td><td>item</td><td>item</td>
</tr>
<tr>
<td>item</td><td>item</td><td>item</td>
</tr>
</table>

Si usas el parche IE7 de Dean Edwards (que se instala en el servidor), es posible que funcione también en IE. Es un parche que repara errores en el soporte CSS de IE e mejora el soporte de CSS2 para facilitar el trabajo de los diseñadores :

http://dean.edwards.name/IE7/
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #7 (permalink)  
Antiguo 16/09/2004, 11:49
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola estebanpc y PascalC.

También puede recurrirse a JavaScript para conseguir ese efecto. Espero funcionará en todos los navegadores.
Código HTML:
<html>
<head>
<style>
.toto {background-color:blue; }
</style>
<script>
function ini() {
	obj=document.getElementById('tabla');
	celda=obj.getElementsByTagName('td');
	for(i=0;i<celda.length;i++) {
		celda[i]['onmouseover']= new Function ("this.className='toto'");
		celda[i]['onmouseout']= new Function ("this.className=''");
	}
}
</script>
</head>
<body onload="ini()">
<table id="tabla">
<tr>
<td>aaa</td><td>aaa</td><td>aaa</td>
</table>
</body>
</html> 
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:40.