für ie6 hover effekte

[manman]

Hallo,

ich bastel gerade für den IE6 die Hovereffekte nach.

dabei wir bei window.onload den betroffenen Elementen ein onmouseover und onmouseout event hinzugefügt.

Bei onmouseover wird nun die entsprechende klasse hinzugefügt, aslo sprich:
this.className += ' hover';

nun ist die Frage, wie ich das umschalten am besten gestalte? Bei onmouseout eine andere funktion aufrufen, die aus className hover wieder herauslöscht? wie würde das gehe ? -=

Gruß

[plan_B]

Hallo,

  

> this.className += ' hover';  

nun ist die Frage, wie ich das umschalten am besten gestalte? Bei onmouseout eine andere funktion aufrufen, die aus className hover wieder herauslöscht? wie würde das gehe ? -=

http://de.selfhtml.org/javascript/objekte/string.htm#replace@title=javascript/objekte/string.htm#replace

Gruß plan_B

[manman]

Hallo,

danke das funktoniert ... für hover mit der Maus funktioniert das ganze auch.

Ich würde nun aber gerne auch das :active verhalten nachahmen. Wie kann ich es erreichen, dass das Element nur solange es den Focus hat der KLasse hover angehört?

Gruß

P.S.: Für was ist eigentlich a:active und wie kann ich das ggf. nachbilden?

[ChrisB]

Hi,

Ich würde nun aber gerne auch das :active verhalten nachahmen. Wie kann ich es erreichen, dass das Element nur solange es den Focus hat der KLasse hover angehört?

In dem du ihm die Klasse wieder nimmst, wenn es den Fokus wieder verliert.
Stichwort onblur.

P.S.: Für was ist eigentlich a:active

Nachlesen! (#1):
:active = für gerade angeklickte Elemente
Nachlesen! (#2):
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

und wie kann ich das ggf. nachbilden?

Warum stellst du die Frage im P.S. noch mal?

MfG ChrisB

[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).