 fedemdq
Usuario Novato
Mensajes: 3
Desde: 11/Oct/2004 | Cambio de color en celdas de una tabla
holas.. bueno lo que quiero saber es como hacer que al pasar el mouse sobre una celda de una tabla, esta cambie de color  .. bueno solo eso espero que puedan ayudarme
|
 12/Ene/2005 10:11 GMT+1 |  Perfil ·  Privado ·  Desconectado |
chavp
Moderador
 Usuario PRO
Mensajes: 16.197
Desde: 20/Dic/2002 | RE: Cambio de color en celdas de una tabla
buscar por mouse over .
|
| 12/Ene/2005 14:00 GMT+1 | Perfil · Privado · Desconectado ·  Web ·  Fotolog |
PrisConSua
Usuario habitual
Mensajes: 61
Desde: 14/Jun/2004 | RE: Cambio de color en celdas de una tabla
Como para casi todo existen distintos modos.
Creo que el mejor es combinando CSS y JavaScript. No se si eso escapa del ambito de "HTML básico". ¿Tienes animos para meterte en esos lios? :8)
El color de fondo de una celda se determina con la propiedad "backgroundColor".
Que el raton pase por encima de un elemento lo detectas con el evento "onmouseover".
Que el raton deje de estar encima de un elemento lo detectas con el evento "onmouseout".
Asi que lo que tienes que hacer es poner a cada celda que quieres que cambie el color un gestor de evento "onmouseover". Ponle tambien un gestor de evento "onmouseout" si quieres que el cambio de color sea solo mientras el raton esta encima, sino el cambio de color perdurara una vez que el raton se desplace fuera de la celda.
El codigo seria algo asi.
Codigo:
<td onMouseOver="changeBgcolor(this)" onMouseOut="changeBgcolor(this)">
Y la funcion changeBgcolor, sencilla, podria ser tal que asi.
Codigo:
function changeBgcolor(cell) {
cell.style.backgroundColor = (cell.style.backgroundColor=="red" ? "yellow":"red");
}
Aqui tienes un ejemplo basico del codigo que te he dicho.
|
| 12/Ene/2005 15:24 GMT+1 | Perfil · Privado · Desconectado · Web |
cdoswebmaster
Machacateclados
Mensajes: 211
Desde: 03/Jul/2004 | RE: Cambio de color en celdas de una tabla
Mira este. Está mejor. Aunque sólo es compatible con IE, ni te molestes en abrirlo con Firefox.
http://usuarios.lycos.es/doswrongerdos/menu_mouseover.htm
........[Código fuente]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<SCRIPT language=javascript>
<!--
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
function mClk(src) {
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
// -->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>JavaScript. Menu que cambia de color al situar el cursor encima. www.cdos.tk</title>
</head>
<body bgcolor="#A0B9C8">
<p><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">JavaScript. Menu que cambia de color al situar el cursor encima. </font></p>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="110">
<TD bgColor=#666666 height=16 onclick=mClk(this); onmouseout=mOut(this,'#008000'); onmouseover=mOvr(this,'#FFCC00'); width="141">
<p align="center">
<font face="Verdana,Arial,Helvetica" size="1"><a href="http://dos.webcindario.com/" target="_blank" style="color: rgb(255,255,255); text-decoration: none">[c:\dos\_]</a></font></p>
</TD>
<TR bgColor=#000000>
<TD height=1 width="141">
<p align="center"><IMG height=1 src=/images/au_pixel1.gif width=139></p>
</TD></TR>
<TR>
<TD bgColor=#666666 height=16 onclick=mClk(this); onmouseout=mOut(this,'#008000'); onmouseover=mOvr(this,'#FFCC00'); width="141">
<p align="center">
<font face="Verdana,Arial,Helvetica" size="1"><a href="http://www.geopromos.com/nl/?210854.46716@243" target="_blank" style="color: rgb(255,255,255); text-decoration: none"> Publicidad</a></font></p>
</TD></TR>
<TR bgColor=#000000>
<TD height=1 width="141">
<p align="center"><IMG height=1 src=/images/au_pixel1.gif width=139></p>
</TD></TR>
</table>
</body>
</html>
........[Código fuente]
|
| 12/Ene/2005 16:30 GMT+1 | Perfil · Privado · Desconectado · Web |
fedemdq
Usuario Novato
Mensajes: 3
Desde: 11/Oct/2004 | RE: Cambio de color en celdas de una tabla
Weno muchas gracias a todos por su ayuda.. Creo que voy a usar el primero porque es mas corto y mas facil .. Si me dicen bien donde va seria de gran ayuda. Saludos y gracias
|
| 19/Ene/2005 04:17 GMT+1 | Perfil · Privado · Desconectado |
PrisConSua
Usuario habitual
Mensajes: 61
Desde: 14/Jun/2004 | RE: Cambio de color en celdas de una tabla
Chincha, cdoswebmaster, que tu codigo sera mejor (no se por que  ) pero ha preferido el mio... 
La funcion changeBgcolor la puedes poner en cualquier parte, entre etiquetas de apertura y cierre "script", pero lo suyo es que vaya en la seccion "head".
Te sugiero que mires el codigo de la pagina de ejemplo. Entre otras cosas para eso la puse... 
|
| 19/Ene/2005 09:03 GMT+1 | Perfil · Privado · Desconectado · Web |
Foro de soporte y ayuda 
Nuevo usuario
