Hyperlink mit Grafik 
Autor: Oliver W.
Besucht 1779,
Followers 1,
Geteilt 0
Ich würde gerne automatisch Hyperlinks mit einer Grafik versehen (siehe Anhang). Das Dreieck als Bild einzufügen, vor jedem Hyperlink, ist zu viel Aufwand!
Geht das? Wenn ja, wie? Über CSS?
Gruß
Oli
Gepostet am
Brauchst es ja nicht als Bild zufügen.
Du kannst es per HTML-Code erledigen:
<img src="images/dreieck.png> <a href="photographie.html>photographie</a>
das ganze kann man mit CSS aufwerten und anpassen:
<a style="font-family:arial; size: 14px; color: c5c5c5;" href..... oder mit eigener CSS
<a class="name" href.....
Weiß nun nicht was nötig ist. Einfach ein Link mal zum Beispiel.
Und das ganze in ein HTML-Objekt statt Text-Objekt.
Autor
Hallo Little-key,
hier im Quellcode sisht Du, wie ich das für Hyperlinks bei meiner aktuellen Webseite gelöst habe:
www.oliver-wendel.de
Ich möchte eben nicht bei jedem Link im Quellcode ein img tag setzen. Im Moment muss ich, bei Änderungen an der Seite, im Editor die HTML-Dateien editieren. Davon möchte ich weg und überlege, meine Seite zukünftig mit WebsiteX5 zu erstellen (welches ich bereits für eine andere Seite verwende). Es wäre also praktisch, wenn man global (in de CSS-Datei?) festlegen könnte, dass den Hyperlinks ein Bild vorangestellt wird.
Gruß
Oli
Ich weiß, was Du möchtest.
Das ist auch über eine eigene CSS realisierbar.
Letztendlich muss ich aber dem Link auch die CSS zuweisen
<a class="name" href.....
oder
<a id="name" href.....
Alternativ würde ich bei größeren Mengen alle Links in einem HTML-Objekt machen.
Damit man nicht alles tippen muss und jederzeit ändern kann, würde ich Excel automatisieren, mit VBA. Excel erstellt mir dann den fertigen Quellcode.
Das geht ganz einfach und soetwas nutze ich auch sehr oft wegen der Erleichterung.
Ansonsten fällt mir keine Alternative auf die Schnelle ein.
Autor
OK, danke für den Tipp. Werde schauen, ob ich damit zurecht komme...
Falls Probleme, VBA ist mein zweites Steckenpferd...
Autor
Also würde ich so etwas
<style type="text/css">
a.link { background: url(../images/xnext.gif);
background-repeat: no-repeat;
background-position: right;
padding-right:14px; } </style>
in die CSS Datei reinnehmen und müsste, wenn ich dich richtig verstehe, die Klasse dann jeweils in den HTML-Dateien manuell korrigieren und auf den neuen Stil ändern.
Du bearbeitest in so einem Fall die HTML-Dateien per VBA mit Excel? Also Suchen/Ersetzen, oder wie?
Autor
wäre es da nicht einfacher, den Text w.o. in den HEAD von jeder HTML-Datei reinzuschreiben? Die CSS-Dateien werdenja auch von Websitex5 generiert und da muss ich dann immer kontrollieren, ob mein Custom Link Stil noch drinnen ist....
Autor
nee, noch anders: Irgendwo mus doch die HTML-Vorlage, die ich über WebsiteX5 gestaltet habe, rumliegen. Wenn ich die Datei im Editor öffne, kann ich doch dort den Style w.o. einfach in den Bereich <head> reinschreiben, oder??
Sorry, wenn ich blöde Fragen stelle, bin leider DAU und habe mit HTML lieber im Browser als im Editor zu tun
Autor
Also,
unter Preview habe ich einen Ordner Style gefunden und dort die Datei style.css editiert. In der Voransicht wird dann auch schön meine Grafik angezeigt. Wenn ich in Websitex5 nun aber Änderungen an "Stile und Modelle" vernehme, wird die Datei natürlich, nach Druck auf "Vorschau", überschrieben. Hmmm... also irgendwo müssen doch die Master-Dateien liegen, die verwendet werden um die HTML und CSS-Dateien zu erstellen?? Es kann doch nicht die Lösung sein, die CSS-Datei, nach dem Upload, auf dem Webserver zu editieren.
Autor
Oh man! Lange gefummelt und nun Lösung gefunden:
Unter "Gestaltung des Templates" im Header ein HTML Objekt eingefügt (Auszug):
<style type="text/css">
.imCssLink:link, .imCssLink { background: url(../images/pfeil.gif); background-repeat: no-repeat; background-position: left; padding-left:10px; background-color: transparent; color: #808080; text-decoration: none; !important }
</style>
Nun werden meine Links auf jeder Seite mit dem Bild "Pfeil.GIF" dekoriert.
Muss man erst einmal drauf kommen...
Hat aber einen bösen Nachgeschmack:
Jeder Link!
Ich hätte das jeweils in der Sitemap unter Eigenschaften der entsprechenden Seite/n gemacht, und zwar Vor dem </HEAD> Tag.
Oder sogar in der Seite eine HTML-Objekt mit Höhe 0 angelegt und im Bereich CSS den Code ohne <style> eingefügt.
Dann könnte man auch auf !important verzichten.
Autor
Sehe noch nicht, dass "Jeder Link" nachteilig ist. Habe ein Bild mit einem Link versehen und da taucht pfeil.gif nicht auf. So soll es sein.
Danke jedenfalls für den Hinweis auf die Seiteneigenschaften > Erweitert. Kannte ich noch nicht und kann mal interessant werden.