»

English French Vietnamese

Print - Link Brackets - JavaScriptBank.com

Want to spruce up your links without adding background images? This JavaScript will enclose your designated links in brackets. You can keep the other links separate, if you like.

Full version: jsB@nk » Link » Link Brackets

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}

#mainDiv a:link, #mainDiv a:active, #mainDiv a:visited {
  color: #000;
  background-color: transparent;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}

#mainDiv a:hover {
  color: #338a1b;
  background-color: transparent;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}

.bracket {
  color: #a63944;
  background-color: transparent;
  font-weight: bold;
  font-size: 14px;
  margin-left: 3px;
  margin-right: 3px;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

<script type="text/javascript">
// Created by: Padonak, Steve Aurigema | http://www.webdeveloper.com/forum/showthread.php?p=767324#post767324

function init(){
  var dlinks = document.getElementById('mainDiv').getElementsByTagName('a');
  var timer;

 	for(var n = 0; n < dlinks.length; n++) {
  		dlinks[n].onmouseover = function() {
   			var txt = null;
   			for( var i in this.childNodes ) {
    				try {
     					if(this.childNodes[i].className == 'bracket' || this.childNodes[i].getAttribute('class') == 'bracket') return; 
  				  } catch(e){ if(this.childNodes[i].className == 'bracket') return; }
  				if(this.childNodes[i].nodeType=='3') txt = this.childNodes[i].cloneNode(false);
  			}
  			while(this.childNodes.length != 0){ this.removeChild(this.childNodes[0]); }
  			var left = document.createElement('span');
  			var right = document.createElement('span');
  			left.setAttribute('id','lbrak'); left.setAttribute('class','bracket'); left.appendChild(document.createTextNode('['));
  			right.setAttribute('id','rbrak'); right.setAttribute('class','bracket'); right.appendChild(document.createTextNode(']'));
  			left.className = 'bracket'; right.className="bracket";
  			this.appendChild(left); this.appendChild(txt); this.appendChild(right);
  			doTarget(15);  // change this number to change the animation of the links
 		}

 		dlinks[n].onmouseout = function(){
  			try {
   				if(timer != ""){clearTimeout(timer);}
   				this.removeChild(document.getElementById("lbrak"));
   				this.removeChild(document.getElementById("rbrak"));
  			} catch(e){ }
 		}

 		dlinks[n].onfocus = function(){this.blur();}
 	}
}

function doTarget(n){
 	var lb = document.getElementById("lbrak");
 	var rb = document.getElementById("rbrak");
 	if(n > 3) {
 		 lb.style.marginRight = n + "px";
 		 rb.style.marginLeft = n + "px";
 		 n--;
 	}
 	else{timer = ""; return;}
 	timer = setTimeout("doTarget(" + n + ")",50);
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  init();
});

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

<div id="mainDiv" style="text-align: left;">
<ul>
  <li><a href="http://www.JavaScriptBank.com/">Web Developer</a></li>
  <li><a href="http://JavaScriptBank.com/">JavaScript Source</a></li>
</ul>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->