Automatisch Bild hinter Link einfügen

[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!