No Dotted Line On Links

So, I’m at this conference and I’ve just finished my presentation when a Goodies reader bops up and asks if there’s any method of losing the dotted line that appears around the active links and active images in the Internet Explorer browser. I didn’t know one off the top of my head, but I told him I’d certainly try to find out. This tutorial is my attempt to “certainly try to find out”.

You’ll find two methods below. The first will allow the dots to pop up for just a moment (my favorite). The second will lose the dots totally.

The dotted line is technically called a “selection rectangle” and it was put there in order to help the user. The rectangle appears when the active text or image has focus brought to it. In layman’s terms, when someone clicks on it.
The rectangle remains as long as focus is upon the element. In fact, the rectangle pretty much stays on the screen even if focus is moved from element to element through tabbing. It makes image maps look cruddy.

The thing is so persistent that it stays surrounding the active text or image even if the user clicks to go to another page and then returns using the BACK button. (You must be using Internet Explorer to see what I’m talking about!) Dig this:

Click Here

Now that you’ve returned, is there still a selection rectangle around the text? Yepper. I thought so. That box won’t go away by itself. You can even try reloading the page.

Now, here’s another link. This link will take you off-site so that the page takes a little longer to change. Notice the selection rectangle this time around.

Click For Another Site

It happened so quickly that some of you might have missed the effect. Click again.

Did you notice that the selection box popped up but only as long as the click itself took to perform? As soon as the click was over, the selection box went away.

Here’s the code that made the second link from up above:

<A HREF=”http://www.vhnd.com”
onClick=”if(navigator.appName == ‘Microsoft Internet Explorer’)this.blur()”>
Click For Another Site</a>

(get it all on one line)

The onClick is what does the trick. It’s a little more than it needs to be because I have it set to test the browser and only react if it’s Internet Explorer. All you really need is the “this.blur()” command. Like so:

<A HREF=”http://www.hairclub.com”
onClick=”this.blur()”>
Click For Another Site</a>

The command is set up so that as soon as the click, the forced focus, is over, focus is taken off of the element and the selection box goes away. The onClick format above can be copied and pasted into a hypertext link no matter if the active area will be text or an image. It works great for image maps.

Lose It Altogether

I actually like the selection rectangle popping up. I just don’t want it to stay. I want it to appear and
leave that fast. Some of you may not want it at all. For that we need a little different coding.
Dig this:

Hair Club for Men

That’s pretty cool, huh? Here’s the code compliments of Derek Petersen at LinuxFreeMail.com:

<a href=http://www.hairclub.com
onFocus=”if(this.blur)this.blur()”>Hair Club for Men</a>

Notice that once focus is brought to the element, the blur is stopped twice.
It’s a double blur! Use this and you’ll get no rectangle at all.

So, to that guy at the conference…I told you I’d find out.

Enjoy!