efecto resaltar bordes cuando pasa el mouse

kintia · #1 (**permalink**) 11/04/2008, 10:26

Hola, tengo un menu hecho a partir de una simple tabla, y queria saber si hay alguna forma de resaltar los bordes en color, pero solo cuando el mouse esta encima o le das click para entrar en el enlace. Supongo que es con java pero no lo conseguí. no lo queria hacer con flash para no tener problemas de que alguna gente o navegadores no lo lean.

Muchas Gracias

osvier · #2 (**permalink**) 11/04/2008, 13:29

Prueba este script:

Código:

<script language="javascript">
	function cambia(color){
		var letra;
		if(color == 1)
			letra="000000";
		else 
			letra="FF0000";
		var objeto = document.getElementById("tabla");   
		objeto.style.borderColor = letra
	}	
</script>

y en el código HTML de tu tabla pones estos atributos y valores:

Código HTML:

<table id="tabla" width="200" border="4" bordercolor="#FF0000" onmouseover="cambia(1);" onmouseout="cambia(2);">

Espero te sirva...

saludos.

kintia · #3 (**permalink**) 11/04/2008, 14:30

Pues gracias pero no funciona osvier.... no se como puedo hacerlo....

saludos

fiel9000 · #4 (**permalink**) 11/04/2008, 14:54

Prueba esto:

Cita:

Si no te funciona activa el javascript de tu navegador.

kintia · #5 (**permalink**) 11/04/2008, 15:21

como se activa el java del navegador fiel? pq al igual es eso, pq el codigo que me has puesto tampoco va

gracias, un saludo

pateketrueke · #6 (**permalink**) 11/04/2008, 16:02

Cita:

Iniciado por kintia

como se activa el java del navegador fiel? pq al igual es eso, pq el codigo que me has puesto tampoco va

gracias, un saludo

javascript, ke navegador usas?

kintia · #7 (**permalink**) 12/04/2008, 11:48

pues estoy trabajando con dreamweaver y de navegadores con explorer y firefox, que supongo que son los mas utilizados

osvier · #8 (**permalink**) 14/04/2008, 13:37

¿Has usado javascript antes?

El código JS se pone dentro de los tags HEAD asi:

Código:

<html>
  <head>
              <script language="javascript">

                             //código javascript

              </script>
  </head>
<body>
    <table ......>
    </table>
</body>
</html>

Luego dentro del body creas tu tabla (la puedes hacer visualmente con Dreamweaver o cualquier programa parecido) y después de crearla, entras al código y sustituyes el tag <table>, por el código que te puse después o el que te posteó fiel9000.

kintia · #9 (**permalink**) 16/04/2008, 10:36

si, lo hice asi como dices, pero nada....

osvier · #10 (**permalink**) 16/04/2008, 12:00

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
	function cambia(color){
		var letra;
		if(color == 1)
			letra="000000";
		else 
			letra="FF0000";
		var objeto = document.getElementById("tabla");   
		objeto.style.borderColor = letra
	}	
</script>
</head>

<body>
<table id="tabla" width="200" border="4" bordercolor="#FF0000" onmouseover="cambia(1);" onmouseout="cambia(2);">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>
</body>
</html>

A mi me funciona bien...