Image as a link

**Irina Eremeeva** · Nov 1, 2002 22:03

Hello,

Can you please let me know if there is a way to put "border=0" for IMG in a CSS if image used as a link.
I put border=0 for IMG and for A:link in CSS but still get border around image after clicking on it.

Thanks,
Irina

**Bill Posters** · Nov 2, 2002 02:03

I think what you are talking about is Internet Explorer's 'focus border'.

It's not actually part of the code, but is a 'feature' of the Internet Explorer browser.
However, it can be removed from your pages...

between <head></head> tags: (or in an externally linked js file)

Code:

<script type="text/javascript">

function unblur() {
this.blur();
}

function getLinksToBlur() {
if (!document.getElementById) return
links = document.getElementsByTagName("a");
for(i=0; i<links.length; i++) {
links[i].onfocus = unblur
}
}

</script>

into <body> tag:

Code:

onload="getLinksToBlur();"

The pros and cons of killing the focus border have been discussed here at length before.
If you're interested in hearing the issues (and egos) involved (mine included

) then check out this thread.

It's worth reading them as you may decide that you'd rather keep it after all. You may not.
Personally, I'm in the anti-focus border camp.

**fillup07** · Nov 2, 2002 15:04

Originally posted by Irina Eremeeva
Hello,

Can you please let me know if there is a way to put "border=0" for IMG in a CSS if image used as a link.
I put border=0 for IMG and for A:link in CSS but still get border around image after clicking on it.

Thanks,
Irina

Not sure if this will make a difference, but try putting it in A:visited and A:hover as well.

**DougBTX** · Nov 3, 2002 10:24

Originally posted by Bill Posters
I think what you are talking about is Internet Explorer's 'focus border'.

Why are people so smart? (Ignore the internal irony please

)

-----------

What you problaby have is something like this:

Code:

a:link img { border-width: 0px; }

(I'm not acctually sure if that validates, will have to check some time)

This works for all <a> tags which belong to the pseudo class ":link". When you click on it, it moves to the ":active" class, so the border goes back to the default.

fillup07 is almost there, but an even better solution:

Code:

a img { border-width: 0px; }

This means that all <img> (image) tags inside <a> tags (even if they are clicked on) will have no border.

hth,
Douglas

**Mathias** · Nov 3, 2002 13:35

Well, another way that I use is simply this:

Code:

 IMG { border: none; }

Then, depending upon which class/id any other img link is in, I can change this at will to suit that particular img using code similiar to the above. No need for messy Javascript in this case.

**Bill Posters** · Nov 3, 2002 23:41

Internet Explorer for Mac (my usual browser) has no border for image links by default.
That lead to my confusion about Irina's point.

My mistake.

**Mathias** · Nov 4, 2002 08:22

*sigh* The world should be ALL mac

**DougBTX** · Nov 4, 2002 13:32

It does seem a bit strange nowadys to be the default, but its minor

(and I do belong to the "focus borders are good" camp too

)

FYI, you could do that on IE/win too, by setting a user style sheet...

Douglas

User Tag List

Thread: Image as a link

Thread Tools

Display

Image as a link

Re: Image as a link

Bookmarks

Bookmarks

Posting Permissions