Full version: jsB@nk » Link » Link Brackets
URL: https://www.javascriptbank.com/link-brackets.html
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
URL: https://www.javascriptbank.com/link-brackets.html
<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#post767324function 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/addLoadEventfunction 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-->