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

estrellita88 · #1 (**permalink**) 08/07/2004, 18:39

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

PascalC · #2 (**permalink**) 08/07/2004, 19:45

td.toto {background-color:blue; }

</head>
<body>
<table>
<tr>
<td onmouseover="this.className='toto'" onmouseout="this.className=''" >cell</td>
</tr>

estrellita88 · #3 (**permalink**) 09/07/2004, 10:52

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?????

PascalC · #4 (**permalink**) 10/07/2004, 08:52

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

estebanpc · #5 (**permalink**) 16/09/2004, 10:25

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?

PascalC · #6 (**permalink**) 16/09/2004, 10:38

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/

JavierB · #7 (**permalink**) 16/09/2004, 10:49

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,