Foros del Web » Creando para Internet » HTML »

Cambio de color al cambiar de celda

Estas en el tema de Cambio de color al cambiar de celda en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/11/2002, 06:06
 
Fecha de Ingreso: junio-2002
Ubicación: Sevilla, España
Mensajes: 24
Antigüedad: 15 años, 6 meses
Puntos: 0
Cambio de color al cambiar de celda

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.
  #2 (permalink)  
Antiguo 27/11/2002, 06:24
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #3 (permalink)  
Antiguo 27/11/2002, 06:31
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 15 años, 11 meses
Puntos: 17
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
__________________
M a l d i t o F r i k i
  #4 (permalink)  
Antiguo 27/11/2002, 06:59
 
Fecha de Ingreso: junio-2002
Ubicación: Sevilla, España
Mensajes: 24
Antigüedad: 15 años, 6 meses
Puntos: 0
Gracias a caricatos y Cain por sus indicaciones.
Ya sé hacerlo
  #5 (permalink)  
Antiguo 27/11/2002, 11:18
 
Fecha de Ingreso: marzo-2002
Mensajes: 151
Antigüedad: 15 años, 9 meses
Puntos: 0
Cain

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

Gracias
  #6 (permalink)  
Antiguo 27/11/2002, 12:11
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 15 años, 11 meses
Puntos: 17
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">
__________________
M a l d i t o F r i k i
  #7 (permalink)  
Antiguo 27/11/2002, 12:59
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
/*ECHATE un HOJITA CAIN*/

<style>

body {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
color: black;
background-color: white;
scrollbar-face-color: white;
scrollbar-shadow-color: navy;
scrollbar-highlight-color: navy;
scrollbar-3dlight-color: navy;
scrollbar-darkshadow-color: navy;
scrollbar-track-color: white;
scrollbar-arrow-color: navy;
scrollbar-border: 1;
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
}
a {
text-decoration: none;
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
}
a:link {
color: #EE0A3D;
}
a:visited {
color: #EE0A3D;
}
a:hover {
color: black;
}
INPUT, TEXTAREA, SELECT {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
color: black;
background-color: White;
}
INPUT.button {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
color: navy;
background-color: #3DACFE;
border-bottom-color: #72C2FE;
border-left-color: #D7ECFF;
border-right-color: #72C2FE;
border-top-color: #D7ECFF;
}
table.main {
border: 0;
background-color: white;
}
TD.main {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
border: 0;
color: black;
}

/* Menú Lateral */
table.menu {
border: 0;
background-color: #78ACFF;
}
/* Separadors */
TD.menu1 {
border: 0;
background-color: #3C85FF;
}
TD.menu1a {
border: 0;
background-color: #78ACFF;
}
a.menu1 {
text-decoration: none;
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight : bold;
}
a.menu1:link {
color: #C8181B;
}
a.menu1:visited {
color: #C8181B;
}
a.menu1:hover {
color: #EA5155;
}
/* Apartats */
TD.menu2 {
border: 0;
background-color: #3DACFE;
}
TD.menu2a {
border: 0;
background-color: #72C2FE;
}
a.menu2 {
text-decoration: none;
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight : bold;
}
a.menu2:link {
color: #C8181B;
}
a.menu2:visited {
color: #C8181B;
}
a.menu2:hover {
color: #EA5155;
}
/* Subapartats */
TD.menu3 {
border: 0;
background-color: #78ACFF;
}
TD.menu3a {
border: 0;
background-color: #72C2FE;
}
a.menu3 {
text-decoration: none;
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight : bold;
}
a.menu3:link {
color: #C8181B;
}
a.menu3:visited {
color: #C8181B;
}
a.menu3:hover {
color: #EA5155;
}
/* Anuncis */
span.anunci {
font-size: small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight: bolder;
color: Red;
elevation: above;
volume: medium;
speech-rate: slow;
}
/* Pàgines */
td.titol {
font-size: small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight: bolder;
elevation: above;
volume: medium;
speech-rate: slow;
color: White;
background-color : #003399;
text-indent : 5;
letter-spacing : 2;
width: 100%;
}
span.subtitol {
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-size: x-small;
font-weight: bold;
color: Black;
elevation: above;
volume: medium;
speech-rate: slow;
text-indent : 2;
}
span.normal {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
color: Black;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
div.normal {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
color: Black;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
/* Articles i Noticies */
span.fonts {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight: 100;
color: Black;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
span.dates {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style : italic;
font-weight: 100;
color: Black;
elevation: level;
volume: medium;
speech-rate: medium;
letter-spacing : 2;
text-align: justify;
}
/* Copyright */
span.copyright {
font-size: xx-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
color: Black;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
a.copyright {
font-size: xx-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
text-decoration: none;
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
}
a.copyright:link {
font-size: xx-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
color: #EE0A3D;
}
a.copyright:visited {
font-size: xx-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
color: #EE0A3D;
}
a.copyright:hover {
font-size: xx-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
color: black;
}
/* Servei de Traduccions */
td.tarifa {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
color: Black;
background-color: #7777FF;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
td.preu {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
font-style : italic;
font-weight: bold;
color: Black;
background-color: #7777FF;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
td.combinacio {
font-size: x-small;
font-family: Geneva, Helvetica, Verdana, Arial, sans-serif;
color: Black;
background-color: #9DD6FF;
elevation: level;
volume: medium;
speech-rate: medium;
text-align: justify;
}
</style>
  #8 (permalink)  
Antiguo 27/11/2002, 13:53
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 889
Antigüedad: 16 años
Puntos: 4
Correción

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!
  #9 (permalink)  
Antiguo 27/11/2002, 14:21
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
... 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
  #10 (permalink)  
Antiguo 27/11/2002, 14:31
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 889
Antigüedad: 16 años
Puntos: 4
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
  #11 (permalink)  
Antiguo 27/11/2002, 15:05
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 15 años, 11 meses
Puntos: 17
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
__________________
M a l d i t o F r i k i
  #12 (permalink)  
Antiguo 27/11/2002, 15:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #13 (permalink)  
Antiguo 27/11/2002, 15:15
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 889
Antigüedad: 16 años
Puntos: 4

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.
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 13:49.