Posted By

sendoa on 09/07/06


Tagged

prototype hover


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

arcturus
meth
Hirmine
pierre
vali29


Efecto HOVER sobre cualquier cosa


 / Published in: JavaScript
 

URL: http://sofanaranja.com/2006/02/17/efecto-hover-sobre-cualquier-cosa-v20/

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

  1. function setHover(className,hoverClassName) {
  2. var hoverDivs = document.getElementsByClassName(className);
  3. hoverDivs = $A(hoverDivs);
  4. hoverDivs.each(
  5. function(div){
  6. div.onmouseover = function(){
  7. Element.addClassName(this,hoverClassName);
  8. }
  9. div.onmouseout = function(){
  10. Element.removeClassName(this,hoverClassName);
  11. }
  12. }
  13. );
  14. }
  15. function init (){
  16. setHover('hover','hoverclass');
  17. }
  18. Event.observe(window, 'load', init, false);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on September 7, 2006

(from http://translate.google.com/)

Taken from Sofa Orange (http://sofanaranja.com)

The idea is that to all the elements that we want to make them hover we assigned the class to them "to hover," and we defined in another class "hoverclass" the attributes of the state to hover.

Although in the code a called variable is used 'div,' element of the page works with cualquier

What we do, just as with the previous method, is to look for elements that contain the class 'to hover', and we assigned to the class 'to them hoverclass' in the event 'to onmouseover'.

More cochairs… Event.observe () is the intelligent form to assign a function to an event without “staining” the HTML of the page. In this case I assign to the function 'to him init ()', that one is in charge to call to' setHover both ()' with parameters that need (class that I have used to define what elements must hover, and class that I want to use when it is made rollover).

You need to login to post a comment.