Posted By

ppalli on 07/15/06


Tagged

hover


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

luman
postNuKe


Efecto hover sobre cualquier cosa 1


 / Published in: JavaScript
 

utiliza prototype.js --> http://prototype.conio.net (http://sofanaranja.com/2006/02/17/efecto-hover-sobre-cualquier-cosa-v20/)

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 May 17, 2007

In English from Google Translate: "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 classto hover', and we assigned to the class to them hoverclass' in the eventto 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.