Removing the dotted square IE inserts around an image link when clicked

[BerlinIT]

Is it possible to remove the dotted square that IE inserts around an image link when it is clicked? Its bloody annoying and looks ugly when you go back to the previous page with the link, and its still surrounded by the dotted square.

Thanks
Greg

[dga]

add: onFocus="this.blur()" in the a href link.

[BerlinIT]

Wicked, thanks for that. :)

[zoobie]

I wouldn't do that...Although it looks ugly to you, it serves several purposes. Firstly, when nothing happens when you click the image, many peeps just think it's a lame site and leave. Secondly, when you click your back button, it's always helpful to see where you were in a list. Without this, everyone would be lost. :rolleyes:

[brothercake]

Absolutely - whatever you do, never ever use onfocus="this.blur()" - if you do, then people who don't or can't use a mouse will be completely unable to navigate your site.

I would suggest leaving them alone. But a mouseup or mousedown handler could be used without creating accessibility problems:

<a href="whatever.html" onmouseup="this.blur()">

[dga]

Originally posted by brothercake
Absolutely - whatever you do, [b]never ever use onfocus="this.blur()" - if you do, then people who don't or can't use a mouse will be completely unable to navigate your site.


Perhaps if it's with an image--but with a text link, the text colour changes by default when it's clicked.

[Nightfire]

He meant that if you don't have a mouse and use the tab key, you'll not know if you're on that link as there's no lines around it. Link colours don't change with the tab key

[Arctic Fox]

I agree with brothercake (gotta be a first) :)

I'd use onMouseDown, onMouseUp, or OnClick...

But not onFocus. It will also mess with your CSS...

[brothercake]

There is a CSS pseudo-class that lets you change the colour of links onfocus:

a:focus { color:red; }

But it doesn't work in any version of IE.

But more importantly, even being able to do that is not enough for usability - it has to be obvious, and that obviousness comes from established visual cues - people know that that dotted border means an element has focus.

[beetle]

If you absolutely HAVE to do this, then you can use hidefocus (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/hidefocus.asp)

But as brothercake said - this "dotted line" is an aid to those who need it. I strongly recommend leaving it alone - users are pretty darn used to seeing it - it's really not that big a deal.

[BerlinIT]

Okay, thanks heaps for the excellent response guys.. I think I will leave the onfocus as it is. I didnt realise it played such an important role, and am very happy i ran this by you guys before finding out how to do it. :)

Cheers,
Greg

[brothercake]

Wow :) I wish everyone was so cool about that ;)

[Skyzyx]

Like this friendly one?
http://www.codingforums.com/showthread.php?s=&threadid=16140