Advanced Search

Return to Snippet

Revision: 1063
at September 7, 2006 01:55 by sendoa
Initial Code 
function setHover(className,hoverClassName) {
    var hoverDivs = document.getElementsByClassName(className);
    hoverDivs = $A(hoverDivs);
    hoverDivs.each(
        function(div){
            div.onmouseover = function(){
                Element.addClassName(this,hoverClassName);
            }
            div.onmouseout = function(){
                Element.removeClassName(this,hoverClassName);
            }
        }
    );
    }
function init (){
    setHover('hover','hoverclass');
}
Event.observe(window, 'load', init, false);
Initial URL 
http://sofanaranja.com/2006/02/17/efecto-hover-sobre-cualquier-cosa-v20/
Initial Description 
Tomado de Sofá Naranja (http://sofanaranja.com)

La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hover”, y definimos en otra clase “hoverclass” los atributos del estado hover.

A pesar de que en el código se usa una variable llamada ‘div’, funciona con *cualquier* elemento de la página…

Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’ en el evento ‘onmouseover’.

Más cosillas… Event.observe() es la forma inteligente de asignar una función a un evento sin “manchar” el HTML de la página. En este caso le asigno la función ‘init()’, que se encarga de llamar a ’setHover()’ con los dos parámetros que necesita (el class que he usado para definir qué elementos tienen hover, y el class que quiero usar cuando se hace rollover).
Initial Title 
Efecto HOVER sobre cualquier cosa
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript