...

View Full Version : what's the javascript to remove the dots around links



dreamingdigital
11-08-2006, 12:29 AM
I use <a href="something.html" onfocus="this.blur();">link or img</a> and it works fine. It doesn't work in image maps though. What code works in image maps to not show that ugly link dotted focus area?

Example of what doesn't work:
<area shape="rect" coords="279,145,377,209" onfocus="this.blur();" href="index.htm">

What's the trick? :)

Bill Posters
11-08-2006, 08:35 AM
Using onfocus="this.blur" can knacker accessibility and usability for those using the keyboard to navigate around a page/site.

Consider using a less harmful approach…
http://cssplay.co.uk/menu/nodots.html
http://www.cssplay.co.uk/menus/ndlrt.html

Consider also whether it's actually that important for you to remove it…
http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i

rubenbuhr
11-08-2006, 05:07 PM
onclick="window.focus();morestuff()"

Bill Posters
11-08-2006, 07:33 PM
onclick="window.focus();…
Again, this isn't a particularly user-friendly approach.
The onclick event can be triggered by usual activation such as pressing the enter/return key on a focussed link - the method most commonly used by keyboard users.
This would whip away the focus to somewhere else on the page (or nowhere).
This breaks the sequence of tabbed elements for keyboard users, meaning that if they want to activate/click the link after the one they've just activated/clicked, they may have to start from the very first tab element on the page.
Every time they activate a link, the focus is reset, breaking their context and their flow.

Avoid it, if possible.

dreamingdigital
11-08-2006, 09:38 PM
The boss says it's ugly so I want to get rid of it.

I tried:
a:focus {
width: 0;
height: 0;
}

No change.

david_kw
11-08-2006, 11:23 PM
Here are a couple articles on the subject that I found:

http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-
http://www.cssplay.co.uk/menu/nodots.html#nogo7

Might be worth checking out. I couldn't get the hideFocus idea to work for an area although it worked fine for a link. I messed with the second one a bit and couldn't get it to work in my easy test case before I had to stop. I wish you better luck.

david_kw

felgall
11-09-2006, 01:04 AM
The CSS for removing the dotted box around the object with the focus is:

outline-style:none;

Bill Posters
11-09-2006, 09:27 AM
The boss says it's ugly so I want to get rid of it.

I tried:
a:focus {
width: 0;
height: 0;
}

No change.

Have you actually read either of the articles to which I linked that show CSS-based techniques?


Here are a couple articles on the subject that I found:

http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-
http://www.cssplay.co.uk/menu/nodots.html#nogo7
Pay attention, mate. ;)



The CSS for removing the dotted box around the object with the focus is:

outline-style:none;
Best not to simply remove the outline, but to replace it, as demonstrated in the articles to which I previously linked.

dreamingdigital
11-12-2006, 09:02 PM
Thanks Stephen,

<area ... style="outline-style:none;"> was the trick.

Bill Posters
11-13-2006, 09:06 AM
:sigh:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum