Webmaster Kit

Using DOM for pseudo-links realization.

The first of all it’s necessary to create CSS classes describing our elements

Selector “u” is used for definition of default properties. Selector “u.ov” determines behavior of the element when Mouse Over event and third selector is used when Mouse Out event occurs.

<style type="text/css">
	
     u  {
          color : #0000cc;
      }
     u.ov {
          color : #3333ff;
          cursor : pointer;
      }
     u.ou {
          color : #0000cc;
      }
	
</style>

The function setClassName() is used for dynamic CSS class setting. This function determines a browser and set CSS class to element.

The function dohref() gets the element collection and sets them event handlers.

Attribute ID contains the number which should be associated with element of the array arUrl[].

<script language="javascript">
	
onload = dohref;
	
function setClassName( element, className) {
  agt = navigator.userAgent.toLowerCase();
  if (agt.indexOf('mozilla')!=-1 && agt.indexOf('spoofer')==-1 && agt.indexOf('compatible') == -1)
    element.setAttribute("class", className);
  else
    element.setAttribute("className", className);
}
	
function dohref() {
  if (!document.getElementById) return
  var aarr = document.getElementsByTagName('u');
  for (var i = 0; i < aarr.length; i++) {
    if (aarr[i].getAttribute('id')) {
		aarr[i].onmouseover = function() {
         setClassName(this, 'ov');
        }
		aarr[i].onmouseout = function() {
		 setClassName(this, 'ou');
        }
        aarr[i].onclick = function() {
		var strU = this.getAttribute('id');
		document.location = arUrl[strU.substring(1,strU.length)];
        }
    }
  }
}
	
var arUrl = new Array(3);
	
arUrl[0] = "http://www.google.com";
arUrl[1] = "http://www.yahoo.com";
arUrl[2] = "http://www.dmoz.org";
	
</script>

Working demo

This entry was posted on Friday, April 1st, 2005 at 12:45 pm and is filed under JavaScripts. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.