Mit Hilfe von etwas CSS kann man, auf das IMG-Element angewendet, grafische Links ganz gut kennzeichnen. Ich habe eine entsprechende Lösung gesucht, um verlinkte Grafiken besser von rein dekorativen Grafiken abheben zu können. Beide sahen hier bisher gleich aus und auf Anhieb war nicht feststellbar, ob sich ein Link hinter einer Grafik verbirgt.
Hier im Webzeugkoffer werden immer wieder mal Leadgrafiken für Artikel verwendet, die oft auch zu einem externen Ziel linken. Ich beschreibe hier kurz, wie ich es für mich umgesetzt habe. Etwas CSS und Hintergrundgrafiken sind dabei behilflich. Kein wirklich revolutionärer Ansatz, aber einer der vielleicht ein Stückchen der Userexperience zu Gute kommt.
Ein Beispiel
Mein Radio
Der CSS-Code und die Hintegrundgrafik für das Bild
img.fullsize {
margin: 10px 0;
border: 5px solid #e7e7e7;
}
a img.fullsize {
padding-bottom: 20px;
background: #fff url(backgrounds/imglink.jpg) 0 100% no-repeat;
}
a img.fullsize:hover {
border: 5px solid #555;
background: #fff url(backgrounds/imglinkhover.jpg) 0 100% no-repeat;
}
Dann brauchts nur noch die passende Hintergrundgrafiken.
Browserkompatibilität
Mit Firefox, Safari, Opera und IE 7+ sollte es ohne Weiteres funktionieren. Für andere entfällt dieses kleine Feature leider, aber ohne weitere Einschränkungen in der Funktionalität. IE kleiner Version 7 kennt bekanntlich kein :hover für sonstige Elemente.
<update>
Hover kann man noch umgehen, in dem man eben die Pseudoklasse des umgebenden A-Elememts für das Bild nutzt.
Dann steht man immer noch vor dem Problem, dass die älteren Browser auch mit Padding und Background für das IMG-Element nichts anfangen können. Theoretisch kann man dann wiederum auf das A-Element zurückgreifen. Dann müsste der Link aber auch den Rahmen bekommen. Das wird dann kniffliger, weil der Link nicht ohne weiteres die Höhe des enthaltenen IMG annimmt.
Weiter habe ich nicht experimentiert, da ich auf der Suche nach einer schnellen und komfortablen Lösung war, die Besucher mit alten Browsern hier sehr rar sind und sonst auch nichts verpassen, wenn diese Kennzeichnung von grafischen Links nicht zieht.
</update>
Für Browser auf Linuxsystemen wie z.B. Konqueror konnte ich es leider nicht testen.
Die Hintergundgrafik kann die Information über den Link nur visuell transportieren. Allerdings wird der Link dahinter, wenn CSS deaktiviert wäre auf andere Weise ersichtlich.
Alternative Lösungen
Wahrscheinlich hätte man hier auch eine Lösung mit jQuery o.ä. suchen und finden können. Was mir für diesen Zweck allerdings etwas zu überdimensioniert ist. Etwas mehr CSS und zwei Hintergrundgrafiken sind für mich zunächst die bevorzugte Wahl. Auf entsprechende Hinweise freuen sich die anderen und Leser und ich aber trotzdem bestimmt.
Anne-Kathrin sagt:
Meinst du nicht, die Änderung der Rahmenfarbe und der Pointer sind ausreichend?
Dass sich dahinter ein Link verbirgt, der geklickt werden kann, ist ohne das kleine „Klick mich“ natürlich nicht auf den ersten Blick klar.
Es gibt viele Konzepte, die „der durchschnittliche User“ vielleicht nicht versteht, ich schätze, dazu gehören z.B. das Akkordeon.
Aber was Bilder betrifft, so wissen die meisten Leute, dass sich „dahinter“ oft ein mehr oder weniger beliebtes Popup öffnet oder sonst irgendein Effekt stattfindet und so fahren sie dann eifrig mit ihrer Maus und finden schon, was sie suchen, oder nicht?
Also für meine Begriffe etwas zu viel des Guten, auch wenn meine Argumentation aus Usability Sicht vielleicht etwas provokant klingen mag.
Allerdings muss ich sagen: ich habe ein ähnliches „Problem“ wie du und habe mir genau darüber auch schon Gedanken gemacht.
Letztendlich ist der Rahmen wieder rausgefallen, weil er mir für manche Bilder schlicht und ergreifend nicht gefallen hat und aus lauter Faulheit (ich gestehe) ist bei mir einfach alles Lightbox verlinkt.
Nehme aber die Sache zum Anlass, das noch mal zu überdenken!
26. September 2008 — 10:32
Björn sagt:
Danke Anne für Deinen Beitrag. Mir persönlich geht es oft so, dass ich wie Du schon anmerkst auch meist über Bilder hovere und mich dann ärgere, wenn sie mal verlinkt sind und mal nicht.
Aber im Endeffekt hast Du auch recht. Hätte ich es nicht eingebaut, hätte es auch niemand gefordert. Würde ich jetzt mal behaupten.
26. September 2008 — 11:19
Anne-Kathrin sagt:
Nein, das hätte sicherlich niemand gefordert…
Ich merke, aber ich habe etwas anders gedacht als du:
das eine ist ja die Vergrößerung („klick to zoom“), das andere ist der Link auf weitere Information(„klick for more info“).
Daher meine weitere Überlegung, hier noch besser in dem zu unterscheiden, was denn passiert, wenn man klickt.
(unabhängig davon, dass mein Firefox mir das Ziel ja anzeigt).
In dem Sinn ist deine Hintergrundgrafik schon ein sehr guter Ansatz, passend zur ja bekannten Kennzeichnung externer Links.
Da ich aber nicht geklickt sondern nur „gehovert“ hatte (in dem Fall, weil ich deine Flickr Galerie irgendwann schon mal angesehen haatte), habe ich mir sozusagen mein eigenes argumentatives Bein gestellt…
26. September 2008 — 12:04
René sagt:
Es funktioniert auch mit dem Konqueror (3.5.5) problemlos.
Ich finde die Idee gut, auch wenn sie sicherlich nicht überall anwendbar ist.
Natürlich wird beim Überfahren mit der Maus oft über das Title-Attribut auch eine entsprechende Info eingeblendet (wenn der Webber es richtig gemacht hat) — aber meist mit einer kleinen Verzögerung und auch nur, wenn die Maus auf dem Bild stehen bleibt. Von daher finde ich den Hover-Effekt (den man ja häufig auch bei normalen Links hat) recht sinnvoll und eben auch den permanent sichtbaren Link-Hinweis. Muss natürlich zum restlichen Layout passen.
Wichtig ist m.E. dem User zu sagen, was passieren wird (eben Klick to Zoom, externer Link etc.)
Und zum Thema Bilder und Links: Die User erwarten geradezu hinter jedem Bild einen Link oder zumindest eine Zoom-Funktion. Die klicken einfach auf alles 🙂
26. September 2008 — 13:00
ex-ratt sagt:
Sollte es nicht möglich sein, statt
a img.fullsize:hover {
a:hover img.fullsize {
zu schreiben, so dass der IE den Spaß versteht? Erscheint mir so ehrlich gesagt auch etwas logischer, also das :hover ans Bild zu hängen. Kannst es ja mal probieren 🙂
26. September 2008 — 16:18
Björn sagt:
Danke „ex-ratt“. Das würde nur bedingt gehen. Dann müsste ich die Hintergrundgrafik auf den Link anwenden und etwas mehr umbauen. Die Hintergrundgrafik im IMG-Element fressen die alten IEs trotzdem nicht. Das war mir erst etwas zu umständlich.
Es wäre grundsätzlich aber möglich, auf das A-Element angewendet, den gleichen Effekt zu erzielen.
Im Grundsatz gehts eher um die Frage, ob und wie man die verlinkten Grafiken deutlich von den nicht verlinkten unterscheidet 🙂
26. September 2008 — 18:22
alexander farkas sagt:
@Björn
Ne, ex-ratt hat absolut recht:
mit ‚a:hover img‘ selektierst du weiterhin das img-Element, welches sich in einem ‚gehoverten‘ Link befindet. Du musst also deine CSS-Angaben ansonsten nichts ändern. Das ist übrigens schon deshalb besser weil du nun auch ein fokusierbares Element hast und den Selektor im a:focus img, a:active img erwitern kannst.
Grüsse
Alex
26. September 2008 — 22:12
Björn sagt:
@Alexander
Das ist klar. Ich wende CSS so weiter auf das IMG an. Und genau das ist das Problem. Da IE6 und darunter nicht nur kein Hover für sonstige Elemente kennt, sondern auch kein Padding und Background für das IMG-Element.
Deshalb müsste man es (Rahmen und Hintergrund), um es allen Browsern recht zu machen, auf das A-Element anwenden, das Hover, Padding und Background verarbeiten kann. Aber alleine schon der Versuch einen Rahmen um das A-Element zu legen, ist kniffliger. Das A-Element nimmt nicht ohne weiteres die Höhe des enthaltenen IMG-Elements an und legt somit den Rahmen nicht richtig um das gesamte Bild. Weiter wollte ich jetzt auch nicht experimentieren.
27. September 2008 — 12:12