:: Hover :: ucho24 - webmaster: webmastering, webdesign, webporady: (x)html, css, php, tutoriale: photoshop.

CSSHover

Atrybut hover, w normalnych przeglądarkach jest obsługiwany przez większość znaczników, problem pojawia się jak zwykle w IE <=6, ale i na to jest rada. O to hack który należy zastosować.
csshover.htc


      &lt;attach event="ondocumentready" handler="parseStylesheets" /&gt;

      &lt;script&gt;

      /**

      *	Whatever:hover - V2.02.060206 - hover, active & focus

      *	------------------------------------------------------------

      *	(c) 2005 - Peter Nederlof

      *	Peterned - http://www.xs4all.nl/~peterned/

      *	License  - http://creativecommons.org/licenses/LGPL/2.1/

      *

      *	Whatever:hover is free software; you can redistribute it and/or

      *	modify it under the terms of the GNU Lesser General Public

      *	License as published by the Free Software Foundation; either

      *	version 2.1 of the License, or (at your option) any later version.

      *

      *	Whatever:hover is distributed in the hope that it will be useful,

      *	but WITHOUT ANY WARRANTY; without even the implied warranty of

      *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU

      *	Lesser General Public License for more details.

      *

      *	Credits and thanks to:

      *	Arnoud Berendsen, Martin Reurings, Robert Hanson

      *

      *	howto: body { behavior:url("csshover.htc"); }
      *	------------------------------------------------------------

      */



      var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,

      currentSheet, doc = window.document, hoverEvents = [], activators = {

      onhover:{on:'onmouseover', off:'onmouseout'},

      onactive:{on:'onmousedown', off:'onmouseup'},

      onunknown:{on:'onfocus', off:'onblur'}

      }


      function parseStylesheets() {

      if(!/MSIE (5|6)/.test(navigator.userAgent)) return;

  window.attachEvent('onunload', unhookHoverEvents);

  var sheets = doc.styleSheets, l = sheets.length;

 for(var i=0; i&lt;l; i++)

      parseStylesheet(sheets[i]);

      }

  function parseStylesheet(sheet) {

      if(sheet.imports) {

      try {

      var imports = sheet.imports, l = imports.length;

      for(var i=0; i&lt;l; i++) parseStylesheet(sheet.imports[i]);

      } catch(securityException){}

      }



      try {

      var rules = (currentSheet = sheet).rules, l = rules.length;

      for(var j=0; j&lt;l; j++) parseCSSRule(rules[j]);

      } catch(securityException){}

  }



  function parseCSSRule(rule) {

      var select = rule.selectorText, style = rule.style.cssText;

      if(!csshoverReg.test(select) || !style) return;



      var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');

      var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);

      var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];

      var affected = select.replace(/:(hover|active|unknown).*$/, '');

      var elements = getElementsBySelect(affected);

      if(elements.length == 0) return;



      currentSheet.addRule(newSelect, style);

      for(var i=0; i&lt;elements.length; i++)

      new HoverElement(elements[i], className, activators[pseudo]);

      }



      function HoverElement(node, className, events) {

      if(!node.hovers) node.hovers = {};

      if(node.hovers[className]) return;

      node.hovers[className] = true;

      hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });

      hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });

      }

      function hookHoverEvent(node, type, handler) {

      node.attachEvent(type, handler);

      hoverEvents[hoverEvents.length] = {

      node:node, type:type, handler:handler

      };

      }


      function unhookHoverEvents() {

      for(var e,i=0; i&lt;hoverEvents.length; i++) {

      e = hoverEvents[i];

      e.node.detachEvent(e.type, e.handler);

      }

      }



      function getElementsBySelect(rule) {

      var parts, nodes = [doc];

      parts = rule.split(' ');

      for(var i=0; i&lt;parts.length; i++) {

      nodes = getSelectedNodes(parts[i], nodes);

      }	return nodes;

      }

      function getSelectedNodes(select, elements) {

      var result, node, nodes = [];

      var identify = (/\#([a-z0-9_-]+)/i).exec(select);

      if(identify) {

      var element = doc.getElementById(identify[1]);

      return element? [element]:nodes;

      }



      var classname = (/\.([a-z0-9_-]+)/i).exec(select);

      var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');

      var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;

      for(var i=0; i&lt;elements.length; i++) {

      result = tagName? elements[i].all.tags(tagName):elements[i].all;

      for(var j=0; j&lt;result.length; j++) {

      node = result[j];

      if(classReg && !classReg.test(node.className)) continue;

      nodes[nodes.length] = node;

      }

      }

	

      return nodes;

      }

      &lt;/script&gt;


		body {

      behavior:url(csshover.htc);

      }