Externe Links kennzeichnen?

[maxfli55]

Kann man unter s9y externe Links kennzeichnen, so dass hinter dem Link-Text z.b. ein Bild (Pfeil) oder Text erscheint?

Ciao
maxfli55

[garvinhicking]

Hi!

Leider kann man externe und interne Links voneinander nur unterscheiden, wenn du einen Link mit einer speziellen CSS-Klasse ausweist.

Also z.B.

Code: Select all

<a class="ext" href="http://www.google.de/">google</a>

Eine andere Lösung wäre, mit javascript dem Problem zu Leibe zu rücken. Es gibt scripts, die alle links untersuchen, relative links in absolute umwandeln und am ende schauen, welche von deiner domain wegzeigen. Das kostet jedoch einiges an performance, ist dafür aber gründlich. Ich habe sowas noch nie eingesetzt, da müsste man also mal speziell nach googlen oder hoffen, dass jemand anderes hie retwas davon weiß

Grüße,
Garvin

[yellowled]

Leider kann man externe und interne Links voneinander nur unterscheiden, wenn du einen Link mit einer speziellen CSS-Klasse ausweist.

Also z.B.

Code: Select all

<a class="ext" href="http://www.google.de/">google</a>

Jein.

Grundsätzlich ist das natürlich richtig, weil es die einzige rein CSS-basierte Methode ist, die in allen Browsern funktioniert, insofern wäre sie meines Erachtens absolut vorzuziehen. Leider ist sie mit Arbeit verbunden

Anständige[tm] Browser unterstützen bereits eine fortgeschrittene Methode, die eigentlich erst mit CSS Level 3 implementiert wird: Einen speziellen Attributselektor. Das geht dann etwa so (style.css):

Code: Select all

a[href^="http"] {
    color: #f00;
}

Der Haken ist offensichtlich: So betrifft es alle Links in einem Blog, die mit "http" beginnen, also z.B. auch absolute Links auf das eigene Blog (wie etwa die homelinks im Header). Dafür erwischt es bleistiftsweise keine externen FTP- oder HTTPS-Links. Und es wird eben (noch) nicht von allen Browsern unterstützt ...

YL

[stm999999999]

Damit lassen sich übrigens noch ganz andere nette Dinge machen, wie etwa

Code: Select all

a[href *="de.wikipedia.org"], a[title *="de.wikipedia.org"] {
	padding: 5px 30px 5px 0;
	background: transparent url(templates/stm/img/icons/Wikipedia-de.png) no-repeat center right;
}

/* websites (pictures and movies) */
a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] {
	padding: 5px 20px 5px 0;
	background: transparent url(templates/stm/img/icons/icon_film.gif) no-repeat center right;
}

/* extensions */

a[href$='.doc'], a[href$='.rtf'],
a[title$='.doc'], a[title$='.rtf']  {
	padding: 5px 20px 5px 0;
	background: transparent url(templates/stm/img/icons/icon_doc.gif) no-repeat center right;
}

Eigentlich wollte ich das ja mal als Plugin zusammenstellen ...

[stm999999999]

Code: Select all

a[href^="http"] {
    color: #f00;
}

Der Haken ist offensichtlich: So betrifft es alle Links in einem Blog, die mit "http" beginnen, also z.B. auch absolute Links auf das eigene Blog (wie etwa die homelinks im Header). Dafür erwischt es bleistiftsweise keine externen FTP- oder HTTPS-Links. Und es wird eben (noch) nicht von allen Browsern unterstützt ...

Letzteres dürfte sich relativ leicht lösen lassen:

Code: Select all

a[href^="http"], a[href^="https"], a[href^="ftp"] {
    color: #f00;
}

[yellowled]

Letzteres dürfte sich relativ leicht lösen lassen:

Code: Select all

a[href^="http"], a[href^="https"], a[href^="ftp"] {
    color: #f00;
}

Ja, sicher. Nur wird der benötigte CSS-Code umso länger, desto mehr man bedient - schließlich müsste man , um es ganz korrekt zu machen, dann auch interne Ausnahmeregelungen einbauen. Natürlich ist das letztlich nicht schwer, aber doch relativ viel Aufwand dafür, dass es bislang bestenfalls teilweise umgesetzt wird.

Zudem ist die obige Beispielformatierung ja noch simpel. Verwende mal verschiedene Linkicons, unterschiedliche Linkformatierungen für :link, :visited, :hover, :active und :focus (von :visited:hover usw. ganz zu schweigen), und baue dann noch Ausnahmestyles für Browser ein, die das Ganze (noch) nicht unterstützen ... das ist ein enormer Aufwand für etwas, was mit »class="external"« und etwas Disziplin beim Verfassen von Einträgen sehr viel simpler und zudem browserübergreifend zu lösen wäre (2 cents usw. )

YL

[stm999999999]

naja, ob das nun soviel Aufwand ist!?

Guck Dir mal http://blog.stephan.manske-net.de/serendipity.css an, da habe ich jede Menge solcher Anweisungen drin und einmal gemacht ist es dauerhaft da ...

Und man könnte das sicher auch in ein Plugin packen, wo man dann die Ausnahmen einfach angeben kann.

BTW, man könnte das mit der class=extern vielleicht im exit-tracking-plugin unterbringen?

[yellowled]

naja, ob das nun soviel Aufwand ist!?

Das ist nicht das hüpfende Komma - eine simple .external ist de facto kürzer und funktioniert zudem browserübergreifend, sie erfordert halt nur etwas mehr »Handarbeit« beim Verfassen von Einträgen

YL

[stm999999999]

und genau diese Handarbeit würde ich als (permanenten) Aufwand betrachten