Foros del Web - efecto resaltar bordes cuando pasa el mouse

Foros del Web (http://www.forosdelweb.com/)

- Diseño web (http://www.forosdelweb.com/f91/)

- - efecto resaltar bordes cuando pasa el mouse (http://www.forosdelweb.com/f91/efecto-resaltar-bordes-cuando-pasa-mouse-574993/)

kintia

11/04/2008 10:26

efecto resaltar bordes cuando pasa el mouse

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

11/04/2008 13:29

Re: efecto resaltar bordes cuando pasa el mouse

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

11/04/2008 14:30

Re: efecto resaltar bordes cuando pasa el mouse

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

saludos

fiel9000

11/04/2008 14:54

Re: efecto resaltar bordes cuando pasa el mouse

Prueba esto:

Cita:

Si no te funciona activa el javascript de tu navegador.

kintia

11/04/2008 15:21

Re: efecto resaltar bordes cuando pasa el mouse

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

11/04/2008 16:02

Re: efecto resaltar bordes cuando pasa el mouse

Cita:

Iniciado por kintia (Mensaje 2360228)

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

12/04/2008 11:48

Re: efecto resaltar bordes cuando pasa el mouse

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

osvier

14/04/2008 13:37

Re: efecto resaltar bordes cuando pasa el mouse

¿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

16/04/2008 10:36

Re: efecto resaltar bordes cuando pasa el mouse

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

osvier

16/04/2008 12:00

Re: efecto resaltar bordes cuando pasa el mouse

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

La zona horaria es GMT -6. Ahora son las 20:57.