image in tagged text

[steven]

Hi,
I want to indicate external links on my site with an image at the end of the
URL, and if possible I'd want to include it in a class, like

<a class="extlink" href="http://www.someexternallink.com">The external
link</a>

Which should be rendered as "The external link [o]", where [o] is the image.
Of course I could write it as

<a href="http://www.someexternallink.com">The external link <img
source="/images/extlink.png" alt=""
class="makesuretheimageiscorrectlyalignedwiththete xt" /></a>

but I was wondering if I could do it with the former.
TIA

Steven

[Darin McGrew]

steven <st***************@telenet.be> wrote:

I want to indicate external links on my site with an image at the end of the
URL, and if possible I'd want to include it in a class, like

<a class="extlink" href="http://www.someexternallink.com">The external
link</a>

Which should be rendered as "The external link [o]", where [o] is the image.

In theory, you could use generated content. In practice, support is poor.

A technique that has better support is to specify a non-repeating
background image positioned on the right, with corresponding padding on the
right to keep the link text off the image.

FWIW, CSS3 selectors may eventually allow you to skip the CLASS attribute.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Shin: a device for finding furniture in the dark." - Steven Wright

[Christoph Päper]

Darin McGrew:

steven <st***************@telenet.be> wrote:

"The external link [o]", where [o] is the image.
In theory, you could use generated content. In practice, support is poor.

Depends on your definition of poor, because it works in all major
browsers except IE.
A technique that has better support is to specify a non-repeating
background image positioned on the right, with corresponding padding
That makes ugly gaps with CSS on, images off.
FWIW, CSS3 selectors may eventually allow you to skip the CLASS attribute.

[href^="http://"]

and similar are not very reliable, because a link that begins like that
doesn't have to be external and vice versa. Some use "rel='external'".

[Darin McGrew]

steven <st***************@telenet.be> wrote:

"The external link [o]", where [o] is the image.

I wrote: In theory, you could use generated content. In practice, support is poor.
Christoph Päper <cr*****@gmx.net> wrote:

Depends on your definition of poor, because it works in all major
browsers except IE.
Okay. Browser support is good. Browser-like OS component support is poor.

Better? :-)
A technique that has better support is to specify a non-repeating
background image positioned on the right, with corresponding padding That makes ugly gaps with CSS on, images off.
Good point. Thanks.
FWIW, CSS3 selectors may eventually allow you to skip the CLASS attribute.

[href^="http://"]

and similar are not very reliable, because a link that begins like that
doesn't have to be external and vice versa. Some use "rel='external'".

You could turn on the effect for such non-relative links:

[href^="http://"]

And then turn off the effect for your own site:

[href^="http://www.example.com"]

Or am I missing something?
--
Darin McGrew, da***@TheRallyeClub.org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: A Series of Unfortunate Events (Saturday, September 3)

[Spartanicus]

Christoph Päper <ch**************@nurfuerspam.de> wrote:

[indicating external links]

A technique that has better support is to specify a non-repeating
background image positioned on the right, with corresponding padding

That makes ugly gaps with CSS on, images off.

For this purpose generated content is also flawed, it fails with css
off, if an icon is used a browser may display something silly like
"image" when images are off, or worse nothing at all.

This should be coded as real content, for example with a graphic icon
and by supplying alt and title content.

--
Spartanicus

[Christoph Päper]

Spartanicus:

[indicating external links]

This should be coded as real content,

Actually it shouldn't be indicated at all, IMO.

FWIW, you can give fallback text for images in generated content, too,
IIRC. I know some people who use arrows, which are "uniencoded".

[Spartanicus]

Christoph Päper <ch**************@nurfuerspam.de> wrote:

[indicating external links]

This should be coded as real content,
Actually it shouldn't be indicated at all, IMO.

Your opinion is at odds with the opinion of usability and UI experts.
FWIW, you can give fallback text for images in generated content, too,
IIRC. I know some people who use arrows, which are "uniencoded".

With CSS2.x? How?

--
Spartanicus

[Christoph Päper]

Spartanicus:

Christoph Päper <ch**************@nurfuerspam.de> wrote:

[indicating external links]

Actually it shouldn't be indicated at all, IMO.

Your opinion is at odds with the opinion of usability and UI experts.

Which ones? Most I know even consider underlining links too distractive,
i.e. colouring should be enough. You could try to introduce a different
colour value for "external" links---that concept is fairly
arbitrary---and maybe even one for visited external links, but there is
no de facto standard for that, unlike the blue and purple of general
links. (Wikipedia and related projects do this for example, but
inter-project links are considered "local" there, despite various
(sub-)domain names.) Therefore you cannot count on the recognizability
of it, which you cannot with images or symbols either.

Whether a link is considered internal or external is often arguable and
should be clear to the reader from the context.

FWIW, you can give fallback text for images in generated content, too,
IIRC. I know some people who use arrows, which are "uniencoded".

With CSS2.x? How?

a[rel~="external"]:after {content: "\2197"; content: url("ext.gif");}

but CSS 2.1 says about <uri>:

| If a user agent cannot display the resource it must ignore it.

It doesn't say it must ignore the rule, which would invoke the preceding
rule. The above fallback should at best work for browsers that don't
support anything but text in generated content (e.g. Opera 5--6 IIRC).
It seems I had some CSS3 proposal or draft in mind, where the above or

a[rel~="external"]:after {content: url("ext.gif"), "\2197";}

was allowed.
PS: I left out the problem, that the knowledge about blue and purple
links is fading among beginners, because of increasing misguided
use of CSS.

[Spartanicus]

Christoph Päper <ch**************@nurfuerspam.de> wrote:

[indicating external links]

Actually it shouldn't be indicated at all, IMO.

Your opinion is at odds with the opinion of usability and UI experts.

Which ones?

The Essential Guide to User Interface Design: An Introduction to GUI
Design Principles and Techniques, Second Edition 2002
by Wilbert O. Galitz

Beasley, R. and Waugh, M. (1997). Predominant Initial and Review Pattern
Navigation in a Fully Constrained Hypermedia Hierarchy: An Empirical
Study (11 Aug. 1997)

Ellis, R.D. and Kurniawan, S.H. (2000). Increasing the usability of
online information for older users: A case study in participatory
design, International Journal of Human-Computer Interaction, 12
(2)263276.

--
Spartanicus