« »

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.

Label: Link Brackets

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<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
	-->

Copy All x2

<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
	-->

Copy All x2

<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
	-->