externe Links kennzeichen

[Fritz]

Hallo,

eigentlich hätte ich die Frage gerne unter dem Themenbereich Barrierefreiheit eingestellt. oder CSS? oder doch Javascript?
na gut.
Ich möchte meine exteren Links als solche kennzeichnen
und zwar automatisch
mit folgender Javascript Funktion:

------------------
function extlinks() {
 for(var i=0; i < document.links.length; ++i)
 if(document.links[i].href.indexOf(window.location.hostname) == -1){
  document.links[i].className="ex";
 }
}
------------------
und im CSS
.ex:before {...

klappt das auch.

Aber damit erhalten auch verlinkte externe img die per CSS festgelegte Verzierung. Das ist nicht schön.
und ich finde keinen weg, das zu vermeiden.

per CSS
.ex img:before {tu nix}
oder ähnliches
krieg ich diese verlinkten images nicht in den Griff.

Hat jemand  eine Idee?
Kann man das Javascript so erweitern, daß verlinkte images nicht als class="ex" ausgezeichnet werden?

Oder muß ich bei meiner bisherigen manuellen Methode bleiben?
oder gibt es vielleicht sogar eine serverseitige Möglichkeit? Wäre natürlich allen anderen Möglichkeiten weit überlegen.

Gruß Fritz

[Axel]

Hallo,

Hat jemand  eine Idee?
Kann man das Javascript so erweitern, daß verlinkte images nicht als class="ex" ausgezeichnet werden?

Du könntest mit document.links[i].childNodes die Kindelemente des Links holen, diese in einer Schleife durchlaufen und damit abfragen, ob sich keine Bilder in dem Link befinden.
Das könnte aber bei vielen Links evtl. etwas Performancelastig sein. Käme aber auf einen Versuch an.

Schöne Grüße
Axel

[Ashura]

Hallo Axel.

Du könntest mit document.links[i].childNodes die Kindelemente des Links holen, diese in einer Schleife durchlaufen und damit abfragen, ob sich keine Bilder in dem Link befinden.

Da man hier aber wohl mit den Textknoten zu kämpfen hat, würde ich hierbei das Pferd von hinten aufzäumen: nachdem alle passenden Links gesetzt wurden, durchläuft man die http://de.selfhtml.org/javascript/objekte/images.htm#allgemeines@title=document.images-Kollektion und entfernt die „ex“-Klasse des http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=Elternelementes, sofern dessen http://de.selfhtml.org/javascript/objekte/all.htm#tag_name@title=Tagname „a“ lautet.

Das könnte aber bei vielen Links evtl. etwas Performancelastig sein.

Das auf jeden Fall.

Wie einfach es doch sein könnte:

a[link:http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#attribute-selectors@title=[href^=http://\]][link:http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#negation@title=:not](img) {  
  /* Regel für externe Links */  
}

Einen schönen Mittwoch noch.

Gruß, Ashura

[MudGuard]

Hi,

[code lang=css]a[href^=http://]:not(img) {
  /* Regel für externe Links */

Das selektiert a-Elemente, deren href-Attribute mit http:// beginnen, wenn es keine img-Elemente sind.
Reduzieren wir das mal auf
a:not(img)
dann wird es noch deutlicher:
Das selektiert a-Elemente, die keine img-Elemente sind. a-Elemente sind nie img-Elemente. Das not(img) bewirkt also allenfalls eine Änderung der Specificity, aber nichts an der Menge der ausgewählten Elemente.

Was Du gerne hättest, ist ganz was anderes.
Du willst a-Elemente selektieren, die kein img enthalten. Das leistet aber der :not()-Selektor nicht.

Es ist weder mit CSS 1 noch mit CSS 2 noch mit CSS 3 möglich, Elemente anhand darin enthaltener (bzw. per :not nicht darin enthaltener) Elemente zu selektieren.

Es gab zwar mal in CSS 3 einen :contains()-Selektor (siehe [http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors]), der ist aber im neuesten WD vom 15. Dezember 2005 verschwunden (zusammen mit dem :indeterminate). Aber selbst der hatte nicht enthaltene Elemente zum Ziel, sondern nur enthaltenen Text.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Du willst a-Elemente selektieren, die kein img enthalten. Das leistet aber der :not()-Selektor nicht.

OK, muss ich wohl missverstanden haben.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Ashura]

Hallo Fritz.

oder gibt es vielleicht sogar eine serverseitige Möglichkeit?

Kommt darauf an, was dir zur Verfügung steht.

Du könntest dir bspw. ein Script schreiben, welches mit Hilfe eines regulären Ausdruckes all die Zeichenketten herausfindet, die ein a-Element ohne enthaltenes img-Element darstellen und diese Zeichenkette deinen wünschen entsprechend anpassen.

In PHP würde sich hierfür bspw. preg_replace() anbieten.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Fritz]

Hallo Ashura,

Du könntest dir bspw. ein Script schreiben, welches mit Hilfe eines regulären Ausdruckes all die Zeichenketten herausfindet, ...

Mal sehen, ob ich Dich richtig verstanden habe:
Ich schreibe ein (PHP)Script, das meine (von PHP generierten) Seiten aufruft und parst.
Anstelle der ursprünglichen Seiten müßte ich natürlich dann dieses (neue) PHP Script aufrufen.
Also alle alten php-files umbenennen?
Das kann's doch nicht sein.

Oder kann ein Script sich selbst nach Zeichenketten durchsuchen?

Irgendwie steh ich auf dem Schlauch ;.)

Gruß Fritz

[Ashura]

Hallo Fritz.

Ich schreibe ein (PHP)Script, das meine (von PHP generierten) Seiten aufruft und parst.
Anstelle der ursprünglichen Seiten müßte ich natürlich dann dieses (neue) PHP Script aufrufen.

Nein. Du sollst dir ein Skript schreiben, was du einmalig über deine auszugebenden Daten jagst.

Wie generierst du deine Seiten? An sich solltest du doch gleich hier die passende Auszeichnung automatisiert durchführen lassen können.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Fritz]

Hallo Ashura,

Nein. Du sollst dir ein Skript schreiben, was du einmalig über deine auszugebenden Daten jagst.

Ja, klar, ich kann das _einmalig_ für alle meine files in meinem Editor auch manuell machen, mit ein bißchen suchen & ersetzen.
Aber das ist nicht, was ich will.
Ich will, daß dies _automatisch_ passiert.

Das geht clientseitig z.B. mit Javascript.

Aber wie mache ich das serverseitig?
Wie jagt man ein PHP Script einmalig über die auszugebenden Daten?

Tut mir leid, ich steh anscheinend auf der Leitung

Gruß Fritz

[Ashura]

Hallo Fritz.

Ich will, daß dies _automatisch_ passiert.

Du hast noch immer meine Frage nich beantwortet, wie die auszugebenden Daten generiert werden. Wenn sie sowieso serverseitig ermittelt, zusammengefasst und ausgegeben werden, kann man hier mit den Zeichenketten hantieren, bevor sie ausgegeben werden.
Damit würde dies zwar bei jedem Aufruf erneut erfolgen, hätte aber auch gleichzeitig den Vorteil, dass die ursprünglichen Daten unberührt blieben.

Wie jagt man ein PHP Script einmalig über die auszugebenden Daten?

Wenn diese als Datei vorliegen, kannst du sie einlesen, deine Manipulationen durchführen, sie öffnen, den neuen Inhalt hineinschreiben und sie wieder schließen.
(Ich habe hier nur der Erklärung wegen die Möglichkeiten in PHP verlinkt, in anderen Sprachen ist das Ganze natürlich ebenso gut umsetzbar.)

Einen schönen Mittwoch noch.

Gruß, Ashura

[Fritz]

Hallo Ashura,

Du hast noch immer meine Frage nich beantwortet, wie die auszugebenden Daten generiert werden.

Aus statischen PHP files (per include zusammengezimmert), PHP files, die auf bestimmte Bedingungen reagieren (z.B. request header Abfragen, Cookie Abfragen), MySQL-Daten, Textdateien und ich weiß nicht was sonst noch.

Und natürlich kann man files serverseitig einlesen, bearbeiten und wieder schreiben oder direkt ausgeben.

Aber für mein Problem scheint ausnahmsweise wirklich Javascript, trotz  aller bekannten Vorbehalte, das Mittel der Wahl zu sein.

Gruß Fritz

[wahsaga]

hi,

Oder kann ein Script sich selbst nach Zeichenketten durchsuchen?

Ja, könnte es auch [1] - aber das würde ich für den vorliegenden Fall für ziemlichen Unsinn halten.
Javascript eignet sich da m.E. besser.

gruß,
wahsaga

[1] http://www.php.net/manual/de/ref.outcontrol.php

[Cybaer]

Hi,

Aber damit erhalten auch verlinkte externe img die per CSS festgelegte Verzierung. Das ist nicht schön.
und ich finde keinen weg, das zu vermeiden.

Du kannst es vermutlich von einer ungefähr so aussehende Bedingung abhängig machen:

if(... && document.links[i].innerHTML.toLowerCase().indexOf("<img")==-1) alert("kein IMG im Link");

Natürlich nur, sofern es sich um einen Browser handelt, der das aktuelle DOM versteht.

Gruß, Cybaer

[Fritz]

Hallo,

danke an Cybaer und Axel - aber natürlich auch an alle anderen.

so klappt es jetzt:
if(... && document.links[i].childNodes[0].nodeName.indexOf('text') == 1) document.links[i].className="ex";

Die Suche nach einem Text Node reicht anscheinend aus, um imgages auszuschließen.

Gruß Fritz

[MudGuard]

Hi,

so klappt es jetzt:
if(... && document.links[i].childNodes[0].nodeName.indexOf('text') == 1) document.links[i].className="ex";

<a href="bla"> <img src="blubb" alt=""></a>

gibt in manchem Browser als erstes Kind des a-Elements einen Textknoten.

cu,
Andreas

[Fritz]

Hallo,

<a href="bla"> <img src="blubb" alt=""></a>

gibt in manchem Browser als erstes Kind des a-Elements einen Textknoten.

stimmt. Und es gibt noch andere Konstellationen, in denen meine Version images nicht richtig erkennt.
Danke für den Hinweis.

Sag mal, Andreas, mit welchem Tool findest Du nodes, Kinder usw.? Oder weißt Du das einfach?

Gruß Fritz

[MudGuard]

Hi,

Sag mal, Andreas, mit welchem Tool findest Du nodes, Kinder usw.? Oder weißt Du das einfach?

DOM Inspektor im Firefox reicht meist aus.

cu,
Andreas

[Fritz]

Hallo,

DOM Inspektor im Firefox reicht meist aus.

das Teil sitzt bei mir seit Jahren im Menü, und ich wußte bisher nicht, wozu.
Wieder was gelernt. Danke schön, Andreas.

Gruß Fritz