Topic awaiting preservation: No link selections in IE

I've always hated how IE draws little borders around links when they're clicked. There are times when they are helpful but other times I'd rather not see them. This little script will get rid of them.

First add these functions to the header of your page.

function noSelect(theTag) {

if (document.all&&document.getElementById) {

tag=document.getElementsByTagName(theTag);

for (var i=0; i<tag.length; i++) {

tag.item(i).UNSELECTABLE='on';

}

}

}



function donoSelect() {

noSelect('A');

}

Then add onload="donoSelect();" to your body tag. Depending on where your links are you may have to apply this to their containers as well.

Of course you could always add UNSELECTABLE="on" directly to your "A" tags but that will add 18 bytes per link.

BTW MS seems to indicate that the UNSELECTABLE attribute is not scriptable (see
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/unselectable.asp?frame=true ) but I learned today that it is while playing with the JSDOMFactory. Perhaps this is a change in IE6 SP1.

However, I suspect that that script will make the page difficult to use for those who like to use their keyboards to navigate from time to time.

Well you wouldn't want to use it on just any page you write, just on those pages where the little box would ruin the look and feel of the page. As a courtesy I suppose one could set UNSELECTABLE="off" in a similar function that would fire on an onkeydown event.

ZOD: Thanks for that - we have discussed this and various solutions were put forward - see here:

How do I get rid of that rectangle when I click on a link?

___________________
Emps

FAQs: Emperor

Hmm. Actually links are still tabable when using this script so keyboard navigation isn't effected.

You should also add [&& !window.opera] to that first if() statment

Good point, thanks! document.all&&document.getElementById&&!window.opera it is.