Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How do I get rid of the border on an image when I make it a live link?

Reply
Thread Tools

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

 
 
=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      03-27-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote :
> Do I need to add anything else but what you have shown?
>
>> <img style="border:0;" src="jugs.jpg" alt="Two earthy containers">

>


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/Nv...earningHTMLCSS

Gérard
--
remove blah to email me
 
Reply With Quote
 
 
 
 
=?windows-1252?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      03-27-2006
Gérard Talbot wrote :
> (E-Mail Removed) wrote :
>> Do I need to add anything else but what you have shown?
>>
>>> <img style="border:0;" src="jugs.jpg" alt="Two earthy containers">

>>

>
> 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
--
remove blah to email me
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      03-27-2006
In article <(E-Mail Removed)>,
Gérard Talbot <(E-Mail Removed)> wrote:

> ...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... >

--
dorayme
 
Reply With Quote
 
=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      03-27-2006
dorayme wrote :
> In article <(E-Mail Removed)>,
> Gérard Talbot <(E-Mail Removed)> wrote:
>
>> ...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).
>


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
--
remove blah to email me
 
Reply With Quote
 
Alan J. Flavell
Guest
Posts: n/a
 
      03-27-2006
On Mon, 27 Mar 2006, Gérard Talbot wrote:

> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-28-2006
In article
<(E-Mail Removed) c.uk>,
"Alan J. Flavell" <(E-Mail Removed)> wrote:

> On Mon, 27 Mar 2006, Gérard Talbot wrote:
>
> > 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.
>


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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-28-2006
In article <(E-Mail Removed)>,
Gérard Talbot <(E-Mail Removed)> wrote:

> dorayme wrote :
> > In article <(E-Mail Removed)>,
> > Gérard Talbot <(E-Mail Removed)> wrote:


snip

> > 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".
>


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, 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.


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.

--
dorayme
 
Reply With Quote
 
=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      03-28-2006
dorayme wrote :
> In article <(E-Mail Removed)>,
> Gérard Talbot <(E-Mail Removed)> wrote:
>
>> dorayme wrote :
>>> In article <(E-Mail Removed)>,
>>> Gérard Talbot <(E-Mail Removed)> wrote:

>
> snip
>
>>> 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".
>>

>
> 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.


>>> 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.

>
> 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
--
remove blah to email me
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      03-28-2006
With neither quill nor qualm, dorayme quothed:

> In article
> <(E-Mail Removed) c.uk>,
> "Alan J. Flavell" <(E-Mail Removed)> wrote:
>
> > On Mon, 27 Mar 2006, Gérard Talbot wrote:
> >
> > > 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.
> >

>
> 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.


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.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
Ed Mullen
Guest
Posts: n/a
 
      03-28-2006
Neredbojias wrote:
> 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.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Get rid of border line around linked image Kian HTML 18 11-27-2012 10:03 PM
how to get rid off border around anchor link Jack Jarmush HTML 3 08-03-2009 02:57 AM
Getting rid of border around image Kevin Audleman HTML 12 02-13-2008 05:32 PM
How to get rid of GridView border magic? progdis@gmail.com ASP .Net 2 08-20-2006 04:10 PM
Get Rid Of Tkinter Canvas Border Martin Python 1 06-29-2004 11:07 AM



Advertisments