für ie6 hover effekte

[Tamosk]

Ich benutze für die hover efecte folgendes javascript:

Zuerst werden die geladenen Stylesheets nach hover Effekten durchsucht, für den IE alternative Klassen angelegt und alle betroffenen Klassen/Rules in einer variablen gespeichert.

  
function parseStylesheets() {  
 var sheets = window.document.styleSheets, l = sheets.length;  
 for(var i=0; i<l; i++)  
  parseStylesheet(sheets[i]);  
}  
 function parseStylesheet(sheet) {  
  if(sheet.imports) {  
   try {  
    var imports = sheet.imports, l = imports.length;  
    for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);  
   } catch(securityException){}  
  }  
  
  try {  
   var rules = (currentSheet = sheet).rules, l = rules.length;  
   for(var j=0; j<l; j++) parseCSSRule(rules[j]);  
  } catch(securityException){}  
 }  
  
 function parseCSSRule(rule) {  
  var select = rule.selectorText, style = rule.style.cssText;  
  if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;  
  var cssrule = new Array();  
  cssrule['pseudo'] = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');  
  var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + cssrule['pseudo']);  
  cssrule['className'] = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];  
  cssrule['affected'] = select.replace(/:hover.*$/, '');  
  currentSheet.addRule(newSelect, style);  
  CSSRules.push(cssrule);  
 }  

Danach wir das Document nach den entsprechendes Elementen durchsucht und denen der mouseover Effekt zugewiesen:

  
function parsenodes(location){  
 for (var j=0; j <CSSRules.length;j++){  
  var elements = getElementsBySelect(CSSRules[j]['affected'],[location]);  
  for(var i=0; i<elements.length; i++)  
   new HoverElement(elements[i], CSSRules[j]['className'], activators[CSSRules[j]['pseudo']]);  
 }  
}  
  
function HoverElement(node, className, events) {  
 if(!node.hovers) node.hovers = {};  
 if(node.hovers[className]) return;  
 node.hovers[className] = true;  
 var alttext = node.style.cssText;  
 node.attachEvent(events.on,  
  function() { node.className += ' ' + className; });  
 node.attachEvent(events.off,  
  function() { node.className =  
   node.className.replace(new RegExp('\\s+'+className, 'g'),''); });  
}  
  
function getElementsBySelect(rule,nodes) {  
 var parts;  
 parts = rule.split(' ');  
 for(var i=0; i<parts.length; i++) {  
  nodes = getSelectedNodes(parts[i], nodes);  
 } return nodes;  
}  
 function getSelectedNodes(select, elements) {  
  var result, node, nodes = [];  
  var classname = (/\.([a-z0-9_-]+)/i).exec(select);  
  var identify = (/\#([a-z0-9_-]+)/i).exec(select);  
  var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');  
  for(var i=0; i<elements.length; i++) {  
   result = tagName? elements[i].all.tags(tagName):elements[i].all;  
   for(var j=0; j<result.length; j++) {  
    node = result[j];  
    if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +  
     classname[1] + '\\b').exec(node.className)))) continue;  
    nodes[nodes.length] = node;  
   }  
  } return nodes;  
 }  
  

Bei onload wird dann folgendes aufgerufen:

  
var currentSheet, doc = window.document, activators = {  
 onhover:{on:'onmouseover', off:'onmouseout'},  
 onactive:{on:'onmousedown', off:'onmouseup'}  
}  
CSSRules = new Array;  
parseStylesheets();  
parsenodes(doc);  

Das ganze ist eine abgewandelte Version des Csshover.htc Behaviors von Peter Nederlof http://www.xs4all.nl/~peterned/csshover.html .
Ich benutze dieses Script weil man nach dem laden/ändern neuer Seitenelement mit Javascript einfach parsenodes(hinzugefügtes element als Parameter) aufrufen kann. (sonst funktionieren die hover Effekte nicht auf dynamisch erstellten/neu hinzugefügten Bereichen).
Wenn du nicht vorhast die seite mit Javascript/Ajax dynamisch zu gestalten, kannst du besser direkt das IE Behavior benutzen (siehe link oben).