• 0

Help with onclick image border


Question

SacrificialS

When you click on a linked image, it puts a tiny grey border thing around it when you click it.

I am sure most of you designers know of it. Does any one know how to have it not appear?

Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
tainted

Im pretty sure you cant, its just how your browser shows that particular link being focused.

The best I can think of is use div's instead of images. Set the div background to your image and do an onclick="window.location='http://www.yourlink.com'"

Or possibly some sort of javascript might do something similar like....

<script>
function init(){
	var links = document.getElementsByTagName('A');

	for(i = 0; i < links.length; i++){
		links[i].onclick = function(){
			this.blur();
		}
	}
}
</script>

<body onload="init()">

That might not actually work, just an idea.

Edited by tainted
Link to post
Share on other sites
  • 0
thePrince

You can hide this border with outline:none; in your CSS file.

Link to post
Share on other sites
  • 0
TurboTuna

in css.

img{ border: 0; }

o if your not bothered with css then just add the border="0" in your <img /> code

Link to post
Share on other sites
  • 0
tainted

Are you talking about the little dotted line border in IE when you click an image link or an image border? By default, image links have a 2px border in which case like the last 2 posts can be removed with css

img { border: 0px; }

Link to post
Share on other sites
  • 0
duritz

i know exactly what you need. add this to your css style sheet:

a:active
{
		 outline:none;
}

a:focus
{
		 -moz-outline-style:none;
}

Link to post
Share on other sites
  • 0
+mrbester

There are two distinctly different border applications for linked images:

One is the default-since-forever solid border that is applied to an image to signify that it is a link. This is removed by:

a img { border-style: none; } /* or border: 0; */

Putting border="0" in the <img/> tag is frowned upon for accessibility reasons; if an image just looks like an image to a browser not using styles, how is the user to know that it is indeed an image?

The other is the "focus" border that is applied to any clickable image which outline: none; (or outline: 0 ) should get rid of.

Link to post
Share on other sites
  • 0
tainted
The other is the "focus" border that is applied to any clickable image which outline: none; (or outline: 0 ) should get rid of.

You learn something new every day. :)

Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.