public/javascripts/rollover.js

   1 /*\r
   2 *       Image rollover js\r
   3 *       Author : Kazuhito Hokamura\r
   4 *       http://webtech-walker.com/\r
   5 *\r
   6 *       Licensed under the MIT License:\r
   7 *       http://www.opensource.org/licenses/mit-license.php\r
   8 */\r
   9 \r
  10 (function(){\r
  11         function rollover(){\r
  12                 var targetClassName = "hoverImg";\r
  13                 var suffix = "_ov";\r
  14 \r
  15                 var overReg = new RegExp("^(.+)(\\.[a-z]+)$");\r
  16                 var outReg = new RegExp("^(.+)" + suffix + "(\\.[a-z]+)$");\r
  17 \r
  18                 var preload = new Array();\r
  19                 var images = document.getElementsByTagName("img");\r
  20 \r
  21                 for (var i = 0, il = images.length; i < il; i++) {\r
  22                         var classStr = images[i].getAttribute("class") || images[i].className;\r
  23                         var classNames = classStr.split(/\s+/);\r
  24                         for(var j = 0, cl = classNames.length; j < cl; j++){\r
  25                                 if(classNames[j] == targetClassName){\r
  26 \r
  27                                         //preload\r
  28                                         preload[i] = new Image();\r
  29                                         preload[i].src = images[i].getAttribute("src").replace(overReg, "$1" + suffix + "$2");\r
  30 \r
  31                                         //mouseover\r
  32                                         images[i].onmouseover = function() {\r
  33                                                 this.src = this.getAttribute("src").replace(overReg, "$1" + suffix + "$2");\r
  34                                         }\r
  35 \r
  36                                         //mouseout\r
  37                                         images[i].onmouseout = function() {\r
  38                                                 this.src = this.getAttribute("src").replace(outReg, "$1$2");\r
  39                                         }\r
  40                                 }\r
  41                         }\r
  42                 }\r
  43         }\r
  44 \r
  45         function addEvent(elem,event,func){\r
  46                 if(elem.addEventListener) {\r
  47                         elem.addEventListener(event, func, false);\r
  48                 }else if(elem.attachEvent) {\r
  49                         elem.attachEvent("on" + event, func);\r
  50                 }\r
  51         }\r
  52         addEvent(window,"load",rollover);\r
  53 })();\r