|
|||
Linkbereich in Form eines T über einem gestaltungsdienlichen Bild
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? Geändert von subdel (30.12.2012 um 17:37 Uhr) |
Sponsored Links |
|
||||
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 |
Sponsored Links |
|
|||
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. |
|
|||
Zitat:
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). |
|
|||
Ich denke, dass bspw. ein Graph, der Messdaten visualisiert, kein gestalterisches Element ist.
Zitat:
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. |
|
||||
Zitat:
Ein Bild ist im Prinzip immer ein Gestaltungselement, also ein <img>. Zitat:
Zitat:
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. |
|
|||
Zitat:
Zitat:
|
Sponsored Links |
|
||||
Hallo,
Zitat:
Zitat:
Mit freundlichen Grüßen, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 13:32 |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 21:12 |
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln. | Andreas91 | Grafik, Design, Typografie | 1 | 06.09.2011 22:41 |
Bild über Bild | rafa | CSS | 2 | 24.01.2010 18:46 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 22:48 |