this.blur on image links to fix dotted lines

[simplyunique]

http://www.htmlgoodies.com/beyond/nodottedline.html

 <A HREF="http://www.whateversite.com" onClick="this.blur()">
<img src="anyimg.jpg"></a>

Is there any way to apply this site-wide without the need for insertion into every image link?

[pissant]

There probably is, try looking at the recent sitepoint article on opening new windows in a standards way...

However... that little dotted line is there for a very good reason and you would be messing wirth accessibility and usability if you get shot of it

[simplyunique]

How would I add this to CSS a:link ? Do you think thats possible? to css the blur ?

[Jeff Lange]

you could add this:

window.onload = function()
{
	links = document.getElementsByTagName('a');
	numLinks = links.length;
	for (i=0; i < numLinks; i++)
	{
		 currentLink = links[i];
		 currentLink.onclick = function()
		 {
			  this.blur();
		 };
	}
};

[simplyunique]

Hi Jeff,

I haven't tried this yet. I wonder, can I apply this to select boxes alo somehow?

I have choice drop downs in an iframe which are doing hall of mirrors on me when i scroll the page. Opera fixes it but ie is borked. It only displays properly again after blur.

Maybe telling it to blur this way on page scroll or on down arrow/mouse-up(anywhere)

[Jeff Lange]

I think this should do that:

window.onload = function()
{
	elements = document.getElementsByTagName('*');
	numElements = elements.length;
	for (i=0; i < numElements; i++)
	{
		currentElement = elements[i];
		if (currentElement.tagName=='A' || currentElement.tagName=='INPUT')
		{
			currentElement.onclick = function()
			{
				this.blur();
			};
		}
	}
};