How do I get rid of the border on an image when I make it a live link?

johnsonholding · Mar 26, 2006

I have an image I want to make a link, but I found out that once I do
that, it creates a small border around it - can I get rid of it so it
isn't there? I don't want the 1 pixel border at all. Thanks

David Dorward · Mar 26, 2006

I have an image I want to make a link, but I found out that once I do
that, it creates a small border around it - can I get rid of it so it
isn't there?

With the CSS border property (although it is a strong visual indicator that
the image is a link, so removing it might not be a good idea)

kenetik · Mar 26, 2006

in the code for the image source add border="0"

<img src="whatever.jpg" border="0" />

Jonathan N. Little · Mar 26, 2006

in the code for the image source add border="0"

<img src="whatever.jpg" border="0" />

Better in CSS on have to do it once

A IMG { border: 0; }

Neredbojias · Mar 26, 2006

With neither quill nor qualm, (e-mail address removed) quothed:

in the code for the image source add border="0"

<img src="whatever.jpg" border="0" />

Sucko sucko sucko! That line of markup is crap. Not only has "border"
been deprecated which means it should not be used under the latest
standards but there is no "alt" attribute, either.

When's the last time _you_ looked at the specs?

johnsonholding · Mar 26, 2006

So what do you purpose? I tried the border=0 and it worked fine for
me, but if there is a better way, please let me know. AND , I don't
know anything about CSS.

David Dorward · Mar 26, 2006

So what do you purpose?

Are you responding to something?
http://www.safalra.com/special/googlegroupsreply/

I tried the border=0 and it worked fine for me, but if there is a better
way, please let me know. AND , I don't know anything about CSS.

First - learn HTML 4.01. It was published almost a decade ago and made the
alt attribute on images mandatory. (Focus on those attributes and elements
in the Strict DTD).

Second - learn CSS 2. It came out a couple of years later and replaces the
presentational aspects of HTML (making HTML much more manageable, reducing
bandwidth needed, and discouraging the abuse of semantic markup (such as
blockquote and table) for the presentational effects it gives in some
common browsers instead of for its meaning).

Neredbojias · Mar 26, 2006

With neither quill nor qualm, (e-mail address removed) quothed:

So what do you purpose? I tried the border=0 and it worked fine for
me, but if there is a better way, please let me know. AND , I don't
know anything about CSS.

You do need to learn at least some css; there's no way around it in
today's html. A quick though non-optimal fix for the image thing is:

<img style="border:0;" src="jugs.jpg" alt="Two earthy containers">

Normal css uses a stylesheet or functions from a style segment in the
<head> section.

johnsonholding · Mar 27, 2006

Do I need to add anything else but what you have shown?

Neredbojias · Mar 27, 2006

With neither quill nor qualm, (e-mail address removed) quothed:

Do I need to add anything else but what you have shown?

It depends on if you have anything else screwed up.

=?ISO-8859-1?Q?G=E9rard_Talbot?= · Mar 27, 2006

Do I need to add anything else but what you have shown?

I do not agree with some of what you were replied.

First, it's best to indicate the width and height of the image so that
the browser does not have to process this info when rendering the page.
The parsing+rendering of the image is a bit faster.

Second, I personally strongly recommend that you do not remove the
border on a clickable image (also called/referred as reactive image)
because such border may be the only thing revealing easily and visually
to the user that it is a clickable image. A link or clickable image
should always be easy to recognize as such.

Web Authoring FAQ: Images
{
7.6. How do I eliminate the blue border around linked images?

In your HTML, you can specify the BORDER attribute for the image:

<a href=...><img src=... alt=... border="0"></a>

Or in your CSS, you can specify the border property for linked images:

a img { border: none ; }

However, *_note that removing the border that indicates an image is a
link makes it harder for users to distinguish quickly and easily which
images on a web page are clickable._*
}

http://www.htmlhelp.com/faq/html/images.html#no-border

Also:

{
One of the most common questions on HTML authoring is how to get rid of
the "ugly border", and the answer -> is technically simple: add the
attribute border="0" into the img tag. This cannot force anything;
browsers may still override it. For example, the Opera browser lets the
user specify "Always have border on image links" rather simply, via the
preferences settings. And on browsers with sufficient support to
stylesheets, e.g. on IE 4, a user can write a user's style sheet which
suggests borders around image links and declare the suggestions as
!important, to override author's stylesheets.

But at present the border="0" attribute mostly works; and that exactly
is the problem. *_If there are no borders around an image, the user does
not see what images are links._* Browsing becomes guesswork, trial and
error.
}
Links Want To Be Links
What about the "ugly borders"?
http://www.cs.tut.fi/~jkorpela/www/links.html#borders

Third, if you want your clickable image to be optimally accessible and
conformant to accessibility guidelines, you may want to specify the
target/destination of the link in the title attribute in the link.

E.g.:
<a href="[Mom's website url]" title="Visit my mom's website"><img
src="[path]/mom.gif" width="150" height="200" alt="My mom"></a>

4th, for beginners wishing to learn HTML 4.01 and CSS, you'll find good
resources, links (that I recommend) here:

http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#LearningHTMLCSS

Gérard

=?windows-1252?Q?G=E9rard_Talbot?= · Mar 27, 2006

Gérard Talbot wrote :

I do not agree with some of what you were replied.

First, it's best to indicate the width and height of the image so that
the browser does not have to process this info when rendering the page.
The parsing+rendering of the image is a bit faster.

"TIP: Always use WIDTH and HEIGHT attributes with images, and they
should equal the actual size of the image, rather than be used to force
the browser to resize it.

The WIDTH and HEIGHT attributes let the browser lay out the entire page
before it succeeds in loading all of the graphics. Without them, it has
to wait until the graphic is loaded before it knows where to put
anything below or to the right of the graphic. Over a modem connection,
it could take a while to load all the graphics, and the user may be
faced with a blank screen until then. It's much more friendly to let the
user start reading the page earlier (...)"

quote coming from
Dan's Web Tips: Images
http://webtips.dan.info/images.html

"The width and height attributes are necessary because if they are
excluded, the browser will tend to calculate the size as the image
loads, instead of when the page loads, which means that the layout of
the document may jump around while the page is loading."

quote from HTML tutorial for beginners on image at HTML Dog
http://www.htmldog.com/guides/htmlbeginner/images/

"If you specify a different width to the actual size of the file, many
browsers will resize it for you. It is much better to provide an image
of the correct size and give that real size here. If you don’t supply
the size, the browser may need to rearrange the page as the images are
downloaded to fit them all in; by supplying a size, the browser can
leave the correct sized space and insert the image when downloaded."

quote from Mark Tranchant's HTML tutorial for beginners on image
http://tranchant.plus.com/web/html-tutorial/img

Second, I personally strongly recommend that you do not remove the
border on a clickable image (also called/referred as reactive image)
because such border may be the only thing revealing easily and visually
to the user that it is a clickable image. A link or clickable image
should always be easy to recognize as such.

Usability guru Jakob Nielsen also mentions clickability as an important
aspect saying: "Make obvious what's clickable" and "To maximize the
perceived affordance of clickability, color and underline the link text.
Users shouldn't have to guess or scrub the page to find out where they
can click." That must apply to clickable images too.

Gérard

dorayme · Mar 27, 2006

Gérard Talbot said:
...I personally strongly recommend that you do not remove the
border on a clickable image (also called/referred as reactive image)
because such border may be the only thing revealing easily and visually
to the user that it is a clickable image. A link or clickable image
should always be easy to recognize as such.

Why would you "strongly recommend" something because something
else "may" be the case? It is for good reason that so many people
ask how to remove these ugly border (as you rightly point out
they do).

There are other ways to indicate that they are clickable.

Sometimes, they are just obviously clickable as in a list of
thumbnails even without the words "Click on the following to
enlarge" or to that effect.

Sometimes it is better to have that than a million ugly bordered
thumbnails.

Sometimes, it does not matter whether they are known beforehand
to be clickable. This surprises? Think, maybe there is a very
clear other way to link and this is just anextra facility. Or
maybe just a nice surprise. Is there no room for subtlety? For
surprise?

Next you will be telling folk to underline all their links!
beware of joining the army talibaning their way through the
streets of html <wicked grin... >

=?ISO-8859-1?Q?G=E9rard_Talbot?= · Mar 27, 2006

dorayme wrote :

Why would you "strongly recommend" something because something
else "may" be the case? It is for good reason that so many people
ask how to remove these ugly border (as you rightly point out
they do).

For efficiency, consistency and usability reasons. The user should not
even have to think half a second on whether this image is clickable or
not when viewing that image. Vincent Flanders, Jakob Nielsen and lots of
usability and web experience gurus all agree on this.

There are other ways to indicate that they are clickable.

But they are not the most obvious, immediately recognizable ways;
Nielsen refers to "maximum perceived affordance for clickability".

Sometimes, they are just obviously clickable as in a list of
thumbnails even without the words "Click on the following to
enlarge" or to that effect.

Sometimes it is better to have that than a million ugly bordered
thumbnails.

Sometimes, people exaggerate the ugliness they see and underestimate
visual efficiency, practical consistency of site design from an user's
perspective. Remember that a web author usually knows very well his own
web site; a first time visitor may not and he will be reliably helped by
a blue border around an image.

Sometimes, it does not matter whether they are known beforehand
to be clickable. This surprises?

Most of the time, for a very wide majority of websites, it is in the
best interests of the web author and in the best interests of the
visitors that clickable images be easily known beforehand to be
clickable. Of course, there are exceptions where it may matter less.

Think, maybe there is a very

clear other way to link and this is just anextra facility. Or
maybe just a nice surprise. Is there no room for subtlety? For
surprise?

I've seen several Flash-based sites which were like that: I failed to
notice what was clickable. In fact, I didn't even think (didn't become
aware) there was an element over here or over there which was clickable
in the webpage.

Next you will be telling folk to underline all their links!

Browser manufacturers have already decided so: the default value for
links is to underline them.

beware of joining the army talibaning their way through the
streets of html <wicked grin... >

Talibaning? Your comment is over-excessively exaggerated. Going against
web design consistency won't improve user experience: it'll be the
reverse for a very wide majority of webpages and types of websites.

Same thing with dotted focus lines (or outlines) when a link get
focused. Newbies often want to remove such dotted focus outlines but
they don't realize that doing so makes their webpage less accessible and
less usable. And on this, no one can seriously bring up the ugliness of
those borders.

Gérard

Alan J. Flavell · Mar 28, 2006

Sometimes, people exaggerate the ugliness they see and underestimate
visual efficiency, practical consistency of site design from an
user's perspective. Remember that a web author usually knows very
well his own web site; a first time visitor may not and he will be
reliably helped by a blue border around an image.

Well put.

And (without specific reference to any particular page discussed
here), to my way of thinking there is nothing so *really* ugly as a
page which is scattered with "Click Here" directions, whose presence
was only felt necessary because the author had gone to excessive
lengths to camouflage all of the /normal/ indicators that something is
a link. So much for misguided "subtlety" :-((

regards

dorayme · Mar 28, 2006

Alan J. Flavell said:
Well put.

Before doing too much clapping, you may need to consider exactly
what this was a response to. It may very well be that there are
clear cases where a set of thumbnails on a site are quite
obviously links. The only way to sustain your clapping behaviour
is to exaggerate and distort what I said (as you do, see below)
and simply not use your imagination (this would take longer to
explain, but I would be happy to do this if anyone was
interested).

And (without specific reference to any particular page discussed
here), to my way of thinking there is nothing so *really* ugly as a
page which is scattered with "Click Here" directions, whose presence
was only felt necessary because the author had gone to excessive
lengths to camouflage all of the /normal/ indicators that something is
a link. So much for misguided "subtlety" :-((

regards

Talk about straw men! I am always very suspicious of religions
and orthodoxies especially when adherents have to use such
devices to clap on their fellows and make their points. I did not
talk about "Click here directions" being "scattered all over the
place" and would not dream of such a thing. You choose an
exaggerated case. Here the price of ugly borders may well be the
price worth paying. They may even not be ugly in some situations.

This is the sort of tone and message coming from the gent you are
so happy to clap: railroading all in the name of the religion on
every detail. Yes, there is subtlety and taste and design
considerations and you need to get used to these things as much
as you obviously in the finer details of the technical sides of
html and css. One size does not fit all, there are other ways to
skin a cat besides blind obedience to certain practices.

You might have more usefully said to Mr Talbot (who made some
points in his original post, several times repeated, some of them
good) that unless one has some reasons not to use link borders,
one should do so. This is a very different tone and message to
the one he made. And it is a very different one to the one you
clap.

dorayme · Mar 28, 2006

Gérard Talbot said:
dorayme wrote :
snip

But they are not the most obvious, immediately recognizable ways;
Nielsen refers to "maximum perceived affordance for clickability".

You cannot know that they are not the most obvious in general.
You are too impressed with the main (and generally good) messages
coming from intelligent people

Sometimes, people exaggerate the ugliness they see and underestimate
visual efficiency, practical consistency of site design from an user's
perspective. Remember that a web author usually knows very well his own
web site; a first time visitor may not and he will be reliably helped by
a blue border around an image.

Your response to a fairly clear case I put is to ignore it and
talk about the dangers your prefered orthodoxy (rightly) would
avoid. Never give an inch eh?

I won't joke with you too much from now on, Mr Talbot (as you
view my lame attempts as serious exaggerations).

I really do think you need to be more independently minded.

=?ISO-8859-1?Q?G=E9rard_Talbot?= · Mar 28, 2006

dorayme wrote :

You cannot know that they are not the most obvious in general.

We're talking in general terms. I say that most of the times, having a
blue border around an image makes it clear to the visitor that he can
click the image, makes it clear to him that it is a clickable image,
that he is viewing a reactive image.

You are too impressed with the main (and generally good) messages
coming from intelligent people

Why the personal comment?
Do you read my mind? over the internet? Your comment suggests that you
do not believe that I can reach, all by myself, my own conclusions on
webpage designs/decisions.

I am the only one in this thread who genuinely tried to back up his
claims, his opinions with sources, references, links and quotes. You
certainly have not.

Your response to a fairly clear case I put

A fairly clear case starts with an url, with concrete example, with a
demonstration, with a testcase, with something tangible that people can
see, can test, with a whole and complete webpage where anyone/everyone
can examine a webpage and then make up his mind, choose his side, choose
his webdesign "party", "orthodoxy", etc.. A fairly clear case does not
start with "Sometimes" and does not include "maybe", "perhaps", "could
be", "it's possible" and other general, abstract, hesitation vocabulary.

Furthermore, if you're bringing up the point of ugliness as something
that can override a general consistent web design principle that a very
wide majority of books, authors, gurus, usability studies agree on,
converge on. In other words, your "clear case" better show us a really
really *_ugly_* case of ugliness 2px thick blue border surrounding
thumbnail images.

is to ignore it and
talk about the dangers your prefered orthodoxy (rightly) would
avoid. Never give an inch eh?

I'm not ignoring it. Read again. There may be exceptions but, generally
speaking, following such rule - which is, I repeat, a sane, safe web
design of improving user experience, navigability and usability - is my
best recommendation. *My* recommendation.

I won't joke with you too much from now on, Mr Talbot (as you
view my lame attempts as serious exaggerations).

Lame attempts: certainly. Over-excessive characterization with words
like talibaning: definitely. A serious attempt would be to start with an
url. Otherwise, at least, start with some books, authors, reviews,
accessibility article, etc.. which demonstrates that real ugliness can
and should override sound web design practices promoting intuitive
clickability thanks to a simple (no icon to wonder/guess about, no
reading on what is clickable to do) graphical cue.

A serious attempt in a newsgroup starts with a real name too, Mr
dorayme. Lars Eighner once said in comp.infosystems.www.authoring.html
newsgroup:
"someone who refuses to identify himself [in discussion newsgroups]
cannot expect his opinions to count for anything."

I really do think you need to be more independently minded.

I hope the original poster will do that and make his mind for himself.
The original poster was fully and completely answered on his main topic
and on other issues that he raised: like tutorials and references. Now,
it will be all up to him to make his mind and then do whatever he wants
to do with his images. Same with you. And same with me.

Gérard

Neredbojias · Mar 28, 2006

With neither quill nor qualm, dorayme quothed:

Before doing too much clapping, you may need to consider exactly
what this was a response to. It may very well be that there are
clear cases where a set of thumbnails on a site are quite
obviously links. The only way to sustain your clapping behaviour
is to exaggerate and distort what I said (as you do, see below)
and simply not use your imagination (this would take longer to
explain, but I would be happy to do this if anyone was
interested).

Talk about straw men! I am always very suspicious of religions
and orthodoxies especially when adherents have to use such
devices to clap on their fellows and make their points. I did not
talk about "Click here directions" being "scattered all over the
place" and would not dream of such a thing. You choose an
exaggerated case. Here the price of ugly borders may well be the
price worth paying. They may even not be ugly in some situations.

This is the sort of tone and message coming from the gent you are
so happy to clap: railroading all in the name of the religion on
every detail. Yes, there is subtlety and taste and design
considerations and you need to get used to these things as much
as you obviously in the finer details of the technical sides of
html and css. One size does not fit all, there are other ways to
skin a cat besides blind obedience to certain practices.

You might have more usefully said to Mr Talbot (who made some
points in his original post, several times repeated, some of them
good) that unless one has some reasons not to use link borders,
one should do so. This is a very different tone and message to
the one he made. And it is a very different one to the one you
clap.

Hear hear! Give that lady a cigar!

I agree with you (for a change.) -And so do most web designers. Most
seem not to want the blight of a border on their images nor even the
focus ring. Yes, there are times when indicating link (or link vs.
visited) status is prudent or desirable, but more often than not the
clickable state of a thumbnail is (1) obvious in its own right, (2)
apparent from the pointer on hover, and (3) not even remotely obscure to
anyone who has surfed the Web for more than a few hours. Furthermore,
such a link is seldom critical to the page itself, although if it is,
associated content can easily and usually does make this obvious.

I understand the significance of the focus ring to accessibility, but it
should be a browser-set option, off by default, not something that mars
the aesthetics of everyone's page needlessly and annoyingly.

Ed Mullen · Mar 28, 2006

Neredbojias said:
I understand the significance of the focus ring to accessibility, but it
should be a browser-set option, off by default, not something that mars
the aesthetics of everyone's page needlessly and annoyingly.

FWIW, the applicable Mozilla preference setting is:

browser.display.focus_ring_width

default = 1 pixel, change to zero to turn off.

How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023
How do I remove the background of an image (Pygame)	0	Dec 23, 2022
How do I make this craftinfsystem Work	1	Feb 9, 2023
I am trying to make an auto-play thing. How do I make it work?	5	Apr 5, 2022
A website that I couldn't make a screenshot of it nor save any page from.	1	Oct 29, 2023
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
How do I call the exact function on page load?	6	May 19, 2023
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022

How do I get rid of the border on an image when I make it a live link?

johnsonholding

David Dorward

kenetik

Jonathan N. Little

Neredbojias

johnsonholding

David Dorward

Neredbojias

johnsonholding

Neredbojias

=?ISO-8859-1?Q?G=E9rard_Talbot?=

=?windows-1252?Q?G=E9rard_Talbot?=

dorayme

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Alan J. Flavell

dorayme

dorayme

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Neredbojias

Ed Mullen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads