Automatisch Bild hinter Link einfügen

[marry]

Hallo zusammen,
ich möchte, dass auf meiner Webseite hinter jedem Link ein entsprechendes Bild erscheint. Dabei sind folgende Links möglich:

• Link auf andere Seite dieser Webseite
• Anker auf gleicher Seite
• Link auf externe Webseite
• Link auf PDF-Dokument
• Link auf Word-Dokument
• Link auf RTF-Dokument
• Link auf JPG ...

Wie kann man dies automatisieren? Momentan füge ich das  jeweilige Bild immer händisch ein, was auf Dauer echt nervt. ;-)

Danke schon mal für Eure Hilfe & viele Grüße!
Mandy

[Frank Schönmann]

hi!

ich möchte, dass auf meiner Webseite hinter jedem Link ein entsprechendes
Bild erscheint. Dabei sind folgende Links möglich:

• Link auf andere Seite dieser Webseite
• Anker auf gleicher Seite
• Link auf externe Webseite
• Link auf PDF-Dokument
• Link auf Word-Dokument
• Link auf RTF-Dokument
• Link auf JPG ...
  Wie kann man dies automatisieren? Momentan füge ich das jeweilige Bild
  immer händisch ein, was auf Dauer echt nervt. ;-)

Falls du die Links abhängig von der Dateierweiterung mit Bildern versehen
willst, bietet CSS3 einen neuen Selektor, der das Suffix eines Attribut-
wertes überprüft. Das zugehörige CSS sähe ungefähr so aus:

a[href$=doc]:after { content: "[DOC]"; }
  a[href$=pdf]:after { content: "[PDF]"; }

Statt der einfachen Texte kannst du dort natürlich auch Bilder einsetzen.
Die Selektoren oben treffen jeweils zu, wenn das href-Attribut eines Links
auf "doc" bzw. auf "pdf" endet.

Das Problem bei der Lösung ist, dass es CSS3 noch gar nicht gibt. Zum
Beispiel Gecko (Firefox, Mozilla) und KHTML (Konqueror, Safari, OmniWeb)
können zwar schon damit umgehen, aber der IE kennt noch nichtmal die etwas
fortgeschritteneren CSS2-Selektoren, geschweige denn Selektoren einer noch
nicht fertigen W3C-Recommendation.

Ich denke, am einfachsten, aber leider nicht automatisiert, wäre es in
deinem Fall, wenn du einfach jedem Link eine Klasse zuweisen würdest, die
den entsprechenden Dokumenttyp repräsentiert:

<a href="dokument.pdf" class="pdf">dokument.pdf</a>

Die zugehörigen CSS-Definitionen sehen dann ähnlich wie oben aus, nur mit
einfacheren Selektoren, nämlich "a.pdf" und so weiter.

Eine Alternative wäre es vielleicht, nach dem Laden des Dokuments mit
JavaScript alle Links der HTML-Seite durchzugehen und dort den Wert des
href-Attributs auszulesen und zu überprüfen. Abhängig davon könntest du
dann per DOM jedem A-Element eine Klasse zuweisen. Aber das funktioniert
natürlich auch nicht in allen Browsern so gut wie die händische Lösung.

bye, Frank!

[Ashura]

Hallo Frank.

<a href="dokument.pdf" class="pdf">dokument.pdf</a>

Hier würde ich ansetzen:

.pdf{padding-right: 20px; border:1px solid #000; background: url(pdf.gif) no-repeat right center;}

Damit wird jedem Link, der der Klasse pdf angehört das Hintergrundbild pdf.gif hinzugefügt und ein Innenabstand rechts erzeugt, sodass das Bild nicht hinter dem Text liegt.
Dies sollte AFAIK sogar der IE verstehen.

Gruß, Ashura

[Gunnar Bittersmann]

Hallo marry,

ich möchte, dass auf meiner Webseite hinter jedem Link ein entsprechendes Bild erscheint.

Das lässt sich für moderne Browser mit CSS realisieren.

• Link auf andere Seite dieser Webseite
• Anker auf gleicher Seite
• Link auf externe Webseite

Die könnteste mit Klassen auseinanderhalten. Was Besseres fällt mir gerade nicht ein.

• Link auf PDF-Dokument
• Link auf Word-Dokument
• Link auf RTF-Dokument
• Link auf JPG ...

Die lassen sich selektieren, wenn du das type-Attribut benutzt, was ohnehin anzuraten ist:

<a href="foo.pdf" type="application/pdf">foo</a>  
<a href="bar.doc" type="application/msword">bar</a>  
<a href="baz.rtf" type="application/rtf">baz</a>  
<a href="quz.jpg" type="image/jpeg">foo</a>

Selektoren:
a[type=application\002Fpdf] etc. [SELFHTML: Attributbedingte Formate definieren]

Und dafür gibste dann
:after {content:url(pdf-icon.png)} etc. an. [SELFHTML: :before, :after (Pseudoelemente für automatisch generierten Inhalt)]

Also:
a[type=application\002Fpdf]:after {content:url(pdf-icon.png)}

Der IE versteht allerdings auch in der 6er Version weder attributbedingte Formate noch :after.

Gunnar

[Thomas Meinike]

Hallo,

Selektoren:
a[type=application\002Fpdf]

Statt Codierung bietet sich hier die normale Attribut-Schreibweise mit Anfuehrungszeichen an:
a[type="application/pdf"]

MfG, Thomas