cambiar color celda onmouseover

mrgubu · #1 (**permalink**) 21/12/2004, 12:21

Tengo el siguiente código que cambia el color de las celdas de una tabla de blanco a amarillo cuando hacer mouseover.

Por defecto, la pimera celda ya está seleccionada en amarillo. Quiero hacer un script para que cuando el ratón pase por las otras celdas con mouseover, el color de la primera celda vuelva a blanco.

Por favor ayuda.

Código:

<BODY bgcolor=white>
<table>
  <tr>
    <td style="background-color:yellow;" 
onMouseOver="this.style.background='yellow'"
onMouseOut="this.style.background='white'" >• Celda 1</td>
    <td onMouseOver="this.style.background='yellow'" 
onMouseOut="this.style.background='white'" >• Celda 2</td>
    <td onMouseOver="this.style.background='yellow'" 
onMouseOut="this.style.background='white'" >• Celda 3</td>
  </tr>
</table>

nostromo_ · #2 (**permalink**) 21/12/2004, 22:08

Hola;

Lo que quieres se realiza de la siguiente forma:

Código HTML:

<html>
<head>
<title>Prueba tabla</title>
<script>
function uno(src)
{
	with(document)
	{
		var cel = getElementById(src);
		with(cel)
		{
		 	style.backgroundColor="yellow";
			style.cursor='hand';
		}
		if (src != 1)
		{
			getElementById('1').style.backgroundColor="white";
		}
	}
}
function dos(src)
{
	with(document)
	{
		var cel = getElementById(src);
		with(cel)
		{
			style.backgroundColor="white";
			style.cursor='default';
		}
	}
}
function ini()
{
	with(document)
	{
		getElementById('1').style.backgroundColor = "yellow";
	}
}
</script>
</head>
<body onload=ini();>
<table border=1 cellspacing=0 cellpadding=0>
	<tr>
		<td>Item</td><td>Valor</td>
	</tr>
	<tr id=1 onmouseover=uno('1'); onmouseout=dos('1');>
		<td>1</td><td>100</td>
	</tr>
	<tr id=2 onmouseover=uno('2'); onmouseout=dos('2');>
		<td>2</td><td>152</td>
	</tr>
	<tr id=3 onmouseover=uno('3'); onmouseout=dos('3');>
		<td>3</td><td>254</td>
	</tr>
</table>
</body>
</html>

Nos vemos.

mrgubu · #3 (**permalink**) 22/12/2004, 02:58

Fantástico nostromo! Muchísimas Gracias.

De todas formas faltaría una cosa para culminar lo que quiero hacer, algo que se me olvidó comentar en el mensaje inicial. Se trataría de que después de que el cursor abandone la tabla, la última celda por la que haya pasado el cursor se quede amarilla.

Por favor una ayudita más. Creo que quedaría un código digno de figurar en las FAQ.

nostromo_ · #4 (**permalink**) 22/12/2004, 09:53

Hola;

Aquí otra versión, te toca a tí mejorarlo:

Código HTML:

<html>
<head>
<title>Prueba tabla</title>
<script>
function uno(src)
{
	with(document)
	{
		var cel = getElementById(src);
		with(cel)
		{
		 	style.backgroundColor="yellow";
			style.cursor='hand';
		}
		if (src != 1)
		{
			getElementById('1').style.backgroundColor="white";
		}
		fila('2');
		getElementById('x').value = src;
	}
}
function dos(src)
{
	with(document)
	{
		var cel = getElementById(src);
		with(cel)
		{
			style.backgroundColor="white";
			style.cursor='default';
		}
	}
}
function fila(obj)
{
	with(document)
	{
		var celda = getElementById('x').value;
		if (celda != "")
		{
			var marcar = getElementById(celda);
			switch(obj)
			{
				case "1":
					marcar.style.backgroundColor = "yellow";
				break
				case "2":
					marcar.style.backgroundColor = "white";
				break
			}
		}
	}
}
function ini()
{
	with(document)
	{
		getElementById('1').style.backgroundColor = "yellow";
	}
}
</script>
</head>
<body onload=ini();>
<table border=0 cellspacing=0 cellpadding=0 width=200>
	<tr><td colspan=3 onmousemove=fila('1'); height=20></td></tr>
	<tr>
		<td width=50 onmousemove=fila('1');></td>
		<td width=100 height=150 align=center>
			<table border=1 cellspacing=0 cellpadding=0 width=120>
				<tr>
					<td>Item</td><td>Valor</td>
				</tr>
				<tr id=1 onmouseover=uno('1'); onmouseout=dos('1');>
					<td>1</td><td>100</td>
				</tr>
				<tr id=2 onmouseover=uno('2'); onmouseout=dos('2');>
					<td>2</td><td>152</td>
				</tr>
				<tr id=3 onmouseover=uno('3'); onmouseout=dos('3');>
					<td>3</td><td>254</td>
				</tr>
				<tr id=4 onmouseover=uno('4'); onmouseout=dos('4');>
					<td>4</td><td>155</td>
				</tr>
				<tr id=5 onmouseover=uno('5'); onmouseout=dos('5');>
					<td>5</td><td>189</td>
				</tr>
				<tr id=6 onmouseover=uno('6'); onmouseout=dos('6');>
					<td>6</td><td>322</td>
				</tr>
				<tr id=7 onmouseover=uno('7'); onmouseout=dos('7');>
					<td>7</td><td>89</td>
				</tr>
				<tr id=8 onmouseover=uno('8'); onmouseout=dos('8');>
					<td>8</td><td>782</td>
				</tr>
			</table>
		</td>
		<td width=50 onmousemove=fila('1');></td>
	</tr>
	<tr><td colspan=3 onmousemove=fila('1'); height=20></td></tr>
</table>
<input type=hidden size=5 id=x>
</body>
</html>

Nos vemos.

mrgubu · #5 (**permalink**) 22/12/2004, 10:11

¡Ya me gustaría a míi mejorar esto!! Gracias otra vez.

Mi intención es mezclarlo ahora con otro scrip para mostrar una imagen distinta (según se pasa el cursor por las celdas) en una celda de una segunda tabla . A ver si lo consigo.

Nos vemos.

chusa · #6 (**permalink**) 11/01/2005, 05:54

Tienes otra solución simple en...

http://www.gnupeople.com/modules.php...=viewtopic&t=1

Un saludo y suerte con lo tuyo