Hallo,

ich möchte gerne über einem Bild einen Linkbereich in Form eines (umgedrehten) T erstellen.


Grün: verlinkt; rot: unverlinkt

Es handelt sich bei dem Bild um ein rein gestalterisches Element, das als background-image definiert werden soll. Jetzt weiß ich nicht, wie ich darauf einen Link in Form eines T setzen soll, ohne semantische Unschönheit zu produzieren.


Ich habe zwei Gedanken, die aber beide ihre Macken haben:

Gedanke A:Zwei rechteckige Link-Bereiche via CSS definieren, die zusammen das T bilden
Das Problem dabei ist, dass man dadurch im Markup auch zwei getrennte Links erstellen muss, was semantischer Blödsinn ist. Es handelt sich ja semantisch nur um einen Link zu einem Ziel.

Gedanke B: Image-Map (<area>)
Hier lässt sich das Ganze mit nur einem Link realisieren, allerdings muss das Bild bei dieser Lösung per <img> direkt ins Markup. Es handelt sich jedoch bei dem Bild um ein reines Gestaltungselement und es gehört somit nicht in den HTML-Code.


Hat jemand Lösungsvorschläge?

Guten Abend,

spontan würde mir da eine Lösung mittels ::before und ::after in den Sinn kommen. Die Idee dahinert: überblende doch einfach die Bereiche, welche nicht anklickbar sein sollen. Dies sorgt dafür, dass kein "semantischer Blödsinn" entsteht und das Markup kann wie gewünscht aufgebaut werden. Hierzu habe ich mal eben ein einfaches Beispiel erstellt:

- Link in umgekehrter T-Form

Natürlich ist hier weder garantiert, dass das Ganze auf allen Browsern wie gewünscht funktioniert. Vorallem ältere IEs werden das nicht ohne weiteres Zutun schlucken - aber das überlasse ich dir

Mit freundlichen Grüßen,
lotti

__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

Danke, funktioniert wie gewünscht.

Allerdings weiß ich nicht, ob ich in Hinblick auf die Kompatibilität wirklich :before und :after verwenden sollte.

Verstehen das die Browser in Versionen der letzten 3-4 Jahre? Und wie sieht es mit Browsern auf mobilen Endgeräten aus?

Was noch wichtiger ist: was stellen Browser, die nicht :before und :after verstehen, mit den Eigenschaften an, die daran gebunden sind? Würden sie die Überblender einfach nirgends anzeigen, oder verschandeln sie sie irgendwie? Wenn sie die Überblender einfach nicht anzeigen, wäre das Fallback ein zu großer Link-Bereich, was verschmerzbar wäre, wenn nur ab und zu ein Besucher auf die Seite kommt, bei dem das nicht funktioniert.

Can I use... Support tables for HTML5, CSS3, etc

Wenn ein Browser mit dem Selektor nichts anfangen kann, sollte er die Regel ignorieren. Das kannst du aber auch selbst mit den entsprechenden Browsern prüfen, welche das sind zeigt dir caniuse.com.

"Can I Use" ist eine nette Idee, allerdings scheinen dort noch zu wenig Daten vorzuliegen. Oder ist ein fehlender Browsereintrag einfach ein Indiz dafür, dass er die gewählte Funktion nicht unterstützt?

Danke für eure Antworten. Habe mich jetzt für eine andere Lösung entschieden (quadratischer Linkbereich).

Also ich weiß nicht, warum du dich so gegen ein img sträubst. Jedes Bild ist im Prinzip ein gestalterisches Element. Trotzdem gibt es das img-Element, man sollte es vermeiden, wenn das Bild einen rein dekorativen Charakter hat, was in deinem Fall ja nicht zutrifft, denn wenn es mit einem Link belegt werden soll, ist es natürlich ein HTML Element, was auch so ausgezeichnet wird.

Ich denke, dass bspw. ein Graph, der Messdaten visualisiert, kein gestalterisches Element ist.

Ich weiß nicht genau, ob da wirklich was dran ist, wenn sich der Link über einem reinen Gestaltungselement befindet. Semantisch gesehen ist es ein Link in der <h1>, der als Blockelement über einen bestimmten Seitenbereich gespannt ist. Dieser Seitenbereich ist das Logo. Weil ich dieses aber nicht separat in die restliche Gestaltung pixelgenau einfügen wollte (mit der Annahme, dass es Browser gibt, die das eben nicht pixelgenau anzeigen), habe ich es in die visuelle Kopfgestaltung, die dann insgesamt aus einem Bild besteht, integriert und die <h1> so darüber platziert, dass der Logo-Bereich verlinkt ist.
Das Logo an sich ist auch noch mal einzeln als Bild eingebunden, wird aber per CSS nicht angezeigt. Grund hierfür ist, dass ich möchte, dass die Google-Bildersuche das Logo separat finden kann.

und was für eine Semantik hat der Graph?
Ein Bild ist im Prinzip immer ein Gestaltungselement, also ein <img>.

Eben wenn eine Semantik dahinter steht, sollte es auch ein HTML Element sein.

Wirklich verstehen tu ich das nicht. Aber es klingt als ob du es dir extrem komliziert machst oder machen willst.

So wie ich es interpretiere, hast du also ein graphisches(?) Logo, wo nur einzelne Bereiche verlinkt sind?
Das ist genau das, wofür eine image map gedacht ist. Das ein Logo "nur" ein gestalterische Element ist, heißt ja nicht, dass man es in das CSS verlagern soll. Es ist ja Bestandteil des Dokument.

Habe das noch nicht verstanden. Ich hatte es mir mal so angeeignet, dass gestaltungsdienliche Seitenelemente nichts im Markup zu suchen haben. Nun klingt es aber so, als müsste jedes Bild per <img> eingebunden werden.
Im Gesamtbild der Seite befindet sich das Logo inmitten von Gestaltungselementen im Kopf der Seite. Erst wollte ich nur das Logo als <img> dort an die richtige Stelle setzen (also quasi über das Kopf-Gestaltungsbild positionieren, so dass alles wie eine Einheit wirkt), aber ich hatte Angst, dass das nicht alle Browser pixelgenau mitmachen. Daher habe ich das sichtbare Logo direkt in das Kopfbild integriert (was dann entsprechend aus dem Logo und noch viel drumrum besteht). Dieses ist kein <img>, sondern per CSS eingebunden (da überwiegend gestaltungsdienlich). Da ich aber auch der Meinung war, dass nur das Logo einzeln durch Suchmaschinen gefunden werden sollte, habe ich dieses noch mal einzeln als <img> eingebunden, dieses aber mit CSS versteckt.

Hallo,

ein Logo transportiert ja eine gewisse Information an den Besucher. Stelle dir deine Seite einfach mal ohne eingebundene Stylesheets vor - dort solltest du alle relevanten Informationen sehen, so auch bspw. das Firmenlogo oder evt. Graphen mit Messdaten. Geschnörkel o.ä. hat dort nichts zu suchen. Auf diese Weise findest du relativ leicht heraus, was in's Markup gehört und was nicht. Gleichzeitig kannst du prüfen, ob dein Markup korrekt aufgebaut ist.

Das bekommt man meist auch ohne diesen Umweg hin.

Mit freundlichen Grüßen,
lotti

__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint