Sofá Naranja

En respuesta a un comentario en el post sobre “Efecto :hover en cualquier cosa”, me puse a jugar con prototype.js para ver si se podía hacer lo mismo de una forma menos farragosa.

El resultado:

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);

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…

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

Gracias a tutiplén a demimismo por sugerir el uso de prototype.js. Creo que estoy enamorado de otra librería :D

contenido relacionado:

• (aquí irían posts relacionados, pero creo que no tengo nada parecido a este...)