Cambiar el estilo de una Celda (JScript)

[trunksito]

Hola foroleros, el problem es este: Quiero que al pazar el mouse sobre una celda este cambio cualquier tipo de sus propiedades de estilo, pero más por el momento me interesa el de los bordes (cuando el mouse este over => aparecen los bordes en la celda, y cuando el mouse eta out => desaparecen), todo esto con JavaScript, se que existe una propiedad ClassName, pero la probe y no se que pasa pero no funka, no se si puedan ayudarme.

thanks de antemano chocherits.

[latindev]

Esto es algo relativamente sencillo y podras notar que no solo se pueden cambiar los bordes sino otras cosas mas
Primer paso
Definir estilo deseado a la celda de la tabla, recomendable que lo hagas en un archivo aparte CSS. el estilo puede ser algo como:

Código: Seleccionar todo

1.  


2. .menu


3. {


4.     BACKGROUND-COLOR: #ffffff;


5.     BORDER-BOTTOM: #ffffff 1px solid;


6.     BORDER-LEFT: #ffffff 1px solid;


7.     BORDER-RIGHT: #ffffff 1px solid;


8.     BORDER-TOP: #ffffff 1px solid;


9.     CURSOR: hand;


10.     FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;


11.     HEIGHT: 19px;


12.     MARGIN: 0px 2px;


13.     WIDTH: 175px


14. }


15.  


16.  

Segundo paso
Escribir el codigo JavaScript necesario para el cambio de apariencia.
tambien es recomendable que este en un archivo diferente al de la pagina misma.

Código: Seleccionar todo

1.  


2. function rollon(a) {


3.         a.style.backgroundColor='#FFFFCC';


4.         a.style.border = '#999999 solid 1px';


5. }


6. function rolloff(a) {


7.         a.style.backgroundColor='#FFFFFF';


8.         a.style.border = '#FFFFFF solid 1px';


9. }


10.  

Tercer paso final
Asignarle los eventos onMouseOut y onMouseOver a la celda deseada, osea algo como:

Código: Seleccionar todo

1.  


2.   <td class="menu" id="menu1"


3.     onmouseout="rolloff(this);"


4.     onmouseover="rollon(this);">


5.     <b>Contenido de la celda</b>


6.   </td>


7.  

Claro que para implementar esto necesitas por lo menos el potente procesador de texto notepad

espero que te haya servido.

[raul338]

Hola, no soy tan nuevo en javascript
pero quisiera saber como se declaran los eventos, como para hacer un ejemplo de este tema. desde ya muchas gracias

http://raul338.iespana.es - Mi Blog, firmen!!

[yalmar]

Hola,

Para ese ejemplo seria:

Código: Seleccionar todo

1. Event.observe(window, 'load', init, false);


2.  


3. function init(){


4.   var doc = document.getElementsByTagName('td');


5.    for (var i = 0; i < doc.length; i++){


6.       if(doc[i].className == "menu" ){


7.          set_style(doc[i]);


8.       }


9.    }  


10. }


11.  


12. functioni set_style(a)


13.   Event.observe(a, 'mouseover', function(){rollon($(a))}, false);


14.   Event.observe(a, 'mouseout', function(){rolloff($(a))}, false);


15. }


16. .


17. .


18. .

bueno, algo como eso.

salu2.