Noticias
Nuevos mensajes
Buscar
Usuarios
Fisgona
Comunidades
Hosting
Otros servicios
Webmasters
fedemdq
Usuario Novato
Usuario Novato
#1

holas.. bueno lo que quiero saber es como hacer que al pasar el mouse sobre una celda de una tabla, esta cambie de color Sonrisa.. bueno solo eso espero que puedan ayudarme Sonrisa

Avatar Image
Moderador
Moderador
#2

buscar por mouse over .

De interés Público
NO AGREGARME COMO AMIGO, gracias
Asuntos claros en los temas
Consultas en temas no afines serán borradas
Tratemos de expresarnos bien, que así da gusto leer


PrisConSua
Usuario habitual
Usuario habitual
#3

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.
Avatar Image
Machacateclados
Machacateclados
#4

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="https://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">&nbsp; 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]

fedemdq
Usuario Novato
Usuario Novato
#5

Weno muchas gracias a todos por su ayuda.. Creo que voy a usar el primero porque es mas corto y mas facilSonrisa Gigante.. Si me dicen bien donde va seria de gran ayuda. Saludos y gracias

PrisConSua
Usuario habitual
Usuario habitual
#6

Chincha, cdoswebmaster, que tu codigo sera mejor (no se por que loco ) pero ha preferido el mio... Muchas risas

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... RollEyes

AnteriorSiguienteArriba
Responder
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Opciones:
Ir al subforo:
Permisos:
TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes
Temas similares
TemaUsuariosRespuestasVisitasActividad
Cambio de color en el hipervínculo al seleccionarlo o pasar ratón por encima
Por: , el 03/Ene/2006, 19:24
musicmib chavp kn1f3eg26kJan/06
Cambio de COlor
Por: , el 15/Oct/2002, 23:57
maurolo Electros18kOct/02