css/csshover.htc

   1 <attach event="ondocumentready" handler="parseStylesheets" />\r
   2 <script>\r
   3 /**\r
   4  *      Whatever:hover - V2.02.060206 - hover, active & focus\r
   5  *      ------------------------------------------------------------\r
   6  *      (c) 2005 - Peter Nederlof\r
   7  *      Peterned - http://www.xs4all.nl/~peterned/\r
   8  *      License  - http://creativecommons.org/licenses/LGPL/2.1/\r
   9  *\r
  10  *      Whatever:hover is free software; you can redistribute it and/or\r
  11  *      modify it under the terms of the GNU Lesser General Public\r
  12  *      License as published by the Free Software Foundation; either\r
  13  *      version 2.1 of the License, or (at your option) any later version.\r
  14  *\r
  15  *      Whatever:hover is distributed in the hope that it will be useful,\r
  16  *      but WITHOUT ANY WARRANTY; without even the implied warranty of\r
  17  *      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\r
  18  *      Lesser General Public License for more details.\r
  19  *\r
  20  *      Credits and thanks to:\r
  21  *      Arnoud Berendsen, Martin Reurings, Robert Hanson\r
  22  *\r
  23  *      howto: body { behavior:url("csshover.htc"); }\r
  24  *      ------------------------------------------------------------\r
  25  */\r
  26 \r
  27 var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,\r
  28 currentSheet, doc = window.document, hoverEvents = [], activators = {\r
  29         onhover:{on:'onmouseover', off:'onmouseout'},\r
  30         onactive:{on:'onmousedown', off:'onmouseup'},\r
  31         onunknown:{on:'onfocus', off:'onblur'}\r
  32 }\r
  33 \r
  34 function parseStylesheets() {\r
  35         if(!/MSIE (5|6)/.test(navigator.userAgent)) return;\r
  36         window.attachEvent('onunload', unhookHoverEvents);\r
  37         var sheets = doc.styleSheets, l = sheets.length;\r
  38         for(var i=0; i<l; i++) \r
  39                 parseStylesheet(sheets[i]);\r
  40 }\r
  41         function parseStylesheet(sheet) {\r
  42                 if(sheet.imports) {\r
  43                         try {\r
  44                                 var imports = sheet.imports, l = imports.length;\r
  45                                 for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);\r
  46                         } catch(securityException){}\r
  47                 }\r
  48 \r
  49                 try {\r
  50                         var rules = (currentSheet = sheet).rules, l = rules.length;\r
  51                         for(var j=0; j<l; j++) parseCSSRule(rules[j]);\r
  52                 } catch(securityException){}\r
  53         }\r
  54 \r
  55         function parseCSSRule(rule) {\r
  56                 var select = rule.selectorText, style = rule.style.cssText;\r
  57                 if(!csshoverReg.test(select) || !style) return;\r
  58                 \r
  59                 var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');\r
  60                 var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);\r
  61                 var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];\r
  62                 var affected = select.replace(/:(hover|active|unknown).*$/, '');\r
  63                 var elements = getElementsBySelect(affected);\r
  64                 if(elements.length == 0) return;\r
  65 \r
  66                 currentSheet.addRule(newSelect, style);\r
  67                 for(var i=0; i<elements.length; i++)\r
  68                         new HoverElement(elements[i], className, activators[pseudo]);\r
  69         }\r
  70 \r
  71 function HoverElement(node, className, events) {\r
  72         if(!node.hovers) node.hovers = {};\r
  73         if(node.hovers[className]) return;\r
  74         node.hovers[className] = true;\r
  75         hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });\r
  76         hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });\r
  77 }\r
  78         function hookHoverEvent(node, type, handler) {\r
  79                 node.attachEvent(type, handler);\r
  80                 hoverEvents[hoverEvents.length] = { \r
  81                         node:node, type:type, handler:handler \r
  82                 };\r
  83         }\r
  84 \r
  85         function unhookHoverEvents() {\r
  86                 for(var e,i=0; i<hoverEvents.length; i++) {\r
  87                         e = hoverEvents[i]; \r
  88                         e.node.detachEvent(e.type, e.handler);\r
  89                 }\r
  90         }\r
  91 \r
  92 function getElementsBySelect(rule) {\r
  93         var parts, nodes = [doc];\r
  94         parts = rule.split(' ');\r
  95         for(var i=0; i<parts.length; i++) {\r
  96                 nodes = getSelectedNodes(parts[i], nodes);\r
  97         }       return nodes;\r
  98 }\r
  99         function getSelectedNodes(select, elements) {\r
 100                 var result, node, nodes = [];\r
 101                 var identify = (/\#([a-z0-9_-]+)/i).exec(select);\r
 102                 if(identify) {\r
 103                         var element = doc.getElementById(identify[1]);\r
 104                         return element? [element]:nodes;\r
 105                 }\r
 106                 \r
 107                 var classname = (/\.([a-z0-9_-]+)/i).exec(select);\r
 108                 var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');\r
 109                 var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;\r
 110                 for(var i=0; i<elements.length; i++) {\r
 111                         result = tagName? elements[i].all.tags(tagName):elements[i].all; \r
 112                         for(var j=0; j<result.length; j++) {\r
 113                                 node = result[j];\r
 114                                 if(classReg && !classReg.test(node.className)) continue;\r
 115                                 nodes[nodes.length] = node;\r
 116                         }\r
 117                 }       \r
 118                 \r
 119                 return nodes;\r
 120         }\r
 121 </script>