[Sommaire] [Imprimer]

   1  /**

   2   * Original Source: Book: DHTML Utopia: Modern Web Design Using JavaScript & DOM

   3   * Also: http://www.sitepoint.com/article/dhtml-utopia-modern-web-design/2

   4   */
   5  
   6  /**

   7   * Automagically set up rollover event handlers for all IMGs within links with the rollover class

   8   *

   9   * This is executed once after page load

  10   *

  11   * @todo preload rollover images?

  12   */
  13  function setupRollovers()
  14  {
  15      if(!document.getElementsByTagName)
  16      { // We are NOT in a DOM-supporting browser:
  17          return;
  18      }
  19  
  20      // Get ALL the links in the current document:

  21      var all_links = document.getElementsByTagName('a');
  22  
  23      // Go through all the links:

  24      for(var i = 0; i < all_links.length; i++)
  25      {
  26          var link = all_links[i];
  27          if(link.className && (' ' + link.className + ' ').indexOf(' rollover ') != -1)
  28          { // The link has the rollover class (among potentially other classes):
  29              // Set up event handlers:

  30              link.onmouseover = mouseover;
  31              link.onmouseout = mouseout;
  32          }
  33      }
  34  }
  35  
  36  
  37  /**

  38   * caters for the differences between Internet Explorer and fully DOM-supporting browsers

  39   */
  40  function findTarget(e)
  41  {
  42   var target;
  43  
  44   if (window.event && window.event.srcElement)
  45     target = window.event.srcElement;
  46   else if (e && e.target)
  47     target = e.target;
  48   if (!target)
  49     return null;
  50  
  51   while (target != document.body &&
  52       target.nodeName.toLowerCase() != 'a')
  53     target = target.parentNode;
  54  
  55   if (target.nodeName.toLowerCase() != 'a')
  56     return null;
  57  
  58   return target;
  59  }
  60  
  61  
  62  /**

  63   * MouseOver event handler

  64   */
  65  function mouseover(e)
  66  {
  67      var target = findTarget(e);
  68      if (!target) return;
  69  
  70      var img_tag = target.childNodes[0];
  71      if( img_tag.nodeName.toLowerCase() != 'img')
  72      {
  73          img_tag = target.childNodes[1];
  74      }
  75  
  76      // Take the "src", which names an image called "something.ext",

  77      // Make it point to "something_over.ext"

  78      img_tag.src = img_tag.src.replace(/(\.[^.]+)$/, '_over$1');
  79  }
  80  
  81  
  82  /**

  83   * MouseOut event handler

  84   */
  85  function mouseout(e)
  86  {
  87   var target = findTarget(e);
  88   if (!target) return;
  89  
  90      var img_tag = target.childNodes[0];
  91      if( img_tag.nodeName.toLowerCase() != 'img')
  92      {
  93          img_tag = target.childNodes[1];
  94      }
  95  
  96   // Take the "src", which names an image as "something_over.ext",

  97   // Make it point to "something.ext"

  98   img_tag.src = img_tag.src.replace(/_over(\.[^.]+)$/, '$1');
  99  }
 100  
 101  
 102  /**

 103   * When the page loads, set up the rollovers

 104   */
 105  addEvent( window, 'load', setupRollovers, false );