Cambio de color al cambiar de celda

habibie · #1 (**permalink**) 27/11/2002, 06:06

Quiero que el fondo de mi celda cambie al entrar con el ratón, como sucede aquí en los foros del web al pasar por los mensajes, y usando una hoja de estilos vinculada
Yo lo he hecho creando una clase
.fondo con un color de fondo

y .fondo:hover con otro distinto

y <td class="fondo">, pero no me hace nada.

¿alguien sabe donde está el error?

Gracias.

caricatos · #2 (**permalink**) 27/11/2002, 06:24

Hola habibie:

El hover no funciona en celdas, para usar estilos, puedes hacerlo de varias maneras, pero siempre debes trabajar con el evento onmouseover y onmouseout...
por ejemplo puedes usar dos clases: fondo1 y fondo2
y en cada celda que quieras poner el efcto tendrías que poner:
onmouseover="this.className=fondo2"
onmouseout="this.className=fondo1"

y también puedes usar estilos en linea

onmouseover="this.style.backgroundColor=color1"
onmouseout="this.style.backgroundColor=color2"

Espero que te sirva.

Saludos

Cain · #3 (**permalink**) 27/11/2002, 06:31

Si quieres, puedes copiarte el código que encontrarás en el menú de mi web

Lo he probado con varios navegadores y me funciona en todos

habibie · #4 (**permalink**) 27/11/2002, 06:59

Gracias a caricatos y Cain por sus indicaciones.
Ya sé hacerlo

gnomist · #5 (**permalink**) 27/11/2002, 11:18

Cain

Dónde pego el javascript que tienes en tu página?

Gracias

Cain · #6 (**permalink**) 27/11/2002, 12:11

El script en sí, yo lo he puesto en medio del <body>. En realidad estaría mejor ordenado entre </head> y <body>.

Luego, los CSS que son lo que da el color a las celdas. Puedes ponerlos en el mismo código usando <style>código CSS</style>, o bien crear un archivo.css externo y llamarlo con <link rel="stylesheet" type="text/css" href="/archivo.css">

CORE · #7 (**permalink**) 27/11/2002, 12:59

chivi · #8 (**permalink**) 27/11/2002, 13:53

Caricatos:

Cita:

y también puedes usar estilos en linea

onmouseover="this.style.backgroundColor=color1"
onmouseout="this.style.backgroundColor=color2"

Está mal esa indicación, ya que te daría error. Su correcta utilización para la aplicación de éste tipo de estilos, deberías usar comilla simple para indicar la variable (para entendernos), y comilla doble para indicar el contenido de la variable.

En tu ejemplo la forma correcta quedaría así:
onmouseover= ' this.style.backgroundColor="color1" '
onmouseout= ' this.style.backgroundColor="color2" '

Saludos!

caricatos · #9 (**permalink**) 27/11/2002, 14:21

... y para puntualizar más quiero destacar que esta forma de usar los estilos es "javascript", entonces el atributo css background-color debe ponerse sin guión y con "C" (de color) mayúscula porque sino javascript interpretaría restarle a la variable background el valor de la variable color.

Saludos

chivi · #10 (**permalink**) 27/11/2002, 14:31

mmmm caricatos, ahora que lo mencionas, para el estilo que se utilizaría en éste caso, sobraría "Color".

onmouseover='this.style.background="red" '
onmouseout='this.style.background="white" '

Así quedaría perfecto

Cain · #11 (**permalink**) 27/11/2002, 15:05

CORE:

Al menos podías poner un enlace a mi web tal como se describe en los créditos y las PMF, y en el copyright de la parte inferior de todas las páginas

NOTA: es broma, porque en este post ya hay enlaces a mi web. Pero si usáis contenidos de mi web, os agradecería un enlace de cortesía

caricatos · #12 (**permalink**) 27/11/2002, 15:08

Hola chivi:

Creo que si bien es cierto que se puede obviar el color, como estilo, el background (te lo digo de memoria, aunque puedo equivocarme) lleva más de un posible valor, del cual uno es el color... background-image, background-color, background-repeat...

Aunque si solo se usa el color no es necesario poner otros valores como tú dices, lo correcto sería poner background-color.

Saludos

chivi · #13 (**permalink**) 27/11/2002, 15:15

Estás en lo correcto Caricatos

. "Background" sólo y unicamente así sería mejor para utilizar una imagen de fondo... Como no estamos hablando como tal, debemos utilizar "BakcgroundColor=tal".

Mis disculpas.