Die vielen Möglichkeiten, Formen und Bilder mit HTML und CSS zu verknüpfen

Unterschiedliche Website-Designs erfordern oft eine andere Form als ein Quadrat oder Rechteck, um auf ein Klickereignis zu reagieren. Vielleicht hat Ihre Website eine Art schräges oder gekrümmtes Banner, bei dem der Klickbereich als gerades Rechteck unhandlich groß wäre. Oder Sie haben ein großes, einzigartig geformtes Logo, bei dem nur diese einzigartige Form klickbar sein soll. Oder Sie haben ein interaktives Bild, das unterschiedlich reagiert, wenn verschiedene Bereiche davon angeklickt werden.

Sie können diese Elemente mit einem ungestylten <a>-Tag umgeben, um ein klickbares Rechteck von annähernd richtiger Größe zu erhalten. Sie können die *Form* dieses Bereichs jedoch auch mit verschiedenen Techniken steuern, um sicherzustellen, dass das Ziel Ihres Klickbereichs genau dem auf dem Bildschirm Sichtbaren entspricht.

SVG-Formen

Wenn Ihr Klickziel ein Bild oder ein Teil eines Bildes ist und Sie SVG als Format wählen können, haben Sie bereits eine Menge Kontrolle darüber, wie sich dieses Element auf Ihrer Seite verhält. Der einfachste Weg, einen Teil eines SVG anklickbar zu machen, ist das Hinzufügen eines SVG-Hyperlink-Elements zum Markup. Dies ist so einfach wie das Umschließen des Ziels mit einem <a>-Tag, genau wie Sie es mit einem verschachtelten HTML-Element tun würden. Ihr <a>-Tag kann eine einfache Form oder komplexere Pfade umfassen. Es kann eine Gruppe von SVG-Elementen oder nur eines umschließen. In diesem Beispiel umschließt der Link für das Bullseye ein einzelnes Kreiselement, aber die komplexere Pfeilform besteht aus zwei Polygonen und einem Pfadelement.

Siehe den Stift
Ziel SVG von Bailey Jones (@bailey_jones)
auf CodePen.

Beachten Sie, dass ich in dieser Demo die veraltete Eigenschaft xlink:href verwendet habe, um sicherzustellen, dass der Link in Safari funktioniert. Das alleinstehende href hätte in Internet Explorer, Chrome und Firefox funktioniert.

Der einzige Trick hierbei ist sicherzustellen, dass das <a>-Tag im SVG-Markup enthalten ist und dass das Tag die Form umschließt, die angeklickt werden soll. Die Viewbox für dieses SVG ist immer noch ein Rechteck, daher hätte das Umschließen des gesamten SVG-Elements nicht den gleichen Effekt.

Bildkarten

Nehmen wir an, Sie haben keine Kontrolle über das SVG-Markup oder müssen stattdessen einer Rastergrafik einen klickbaren Bereich hinzufügen. Mit einer Bildkarte ist es möglich, einen klickbaren Bereich auf einen Teil eines <img>-Tags anzuwenden.

Bildkarten werden getrennt von der Bildquelle definiert. Die Karte überlagert effektiv das gesamte Bildelement, aber Sie definieren den klickbaren Bereich. Im Gegensatz zum Hyperlink-Element im SVG-Beispiel haben die Koordinaten in der Bildkarte nichts mit der Definition des Quellbildes zu tun. Bildkarten gibt es seit HTML 3, was bedeutet, dass sie eine ausgezeichnete Browserunterstützung haben. Sie können jedoch nicht allein mit CSS gestylt werden, um interaktive Hinweise zu geben, wie wir es mit SVG beim Überfahren mit der Maus konnten – der Cursor ist der einzige visuelle Hinweis darauf, dass der Zielbereich des Bildes angeklickt werden kann. Es gibt jedoch Optionen zum Stylen der Bereiche mit JavaScript.

W3 Schools bietet ein ausgezeichnetes Beispiel für eine Bildkarte mit einem Bild des Sonnensystems, bei dem die Sonne und die Planeten mit Nahaufnahmen dieser Ziele verknüpft sind – überall sonst im Bild ist nichts klickbar. Das liegt daran, dass die Koordinaten der in ihrer Bildkarte definierten Bereiche den Positionen der Sonne und der Planeten im Basisbild entsprechen.

Hier ist ein weiteres Beispiel von Derek Fogge, das Karten verwendet, um interessantere Klickziele zu erstellen. Es verwendet zwar jQuery, um die Bereiche beim Klicken zu stylen, aber beachten Sie die Art und Weise, wie eine Karte das Bild überlagert und Koordinaten verwendet werden, um die Ziele zu erstellen.

Siehe den Stift
responsives Bildkarten-Demo von Derek Fogge (@PositionRelativ)
auf CodePen.

Sie können Bildkarten auch für noch komplexere Formen implementieren. Lassen Sie uns tatsächlich zu derselben Zielform wie im SVG-Beispiel zurückkehren, aber stattdessen ein Rasterbild verwenden. Wir wollen immer noch den Pfeil und das Bullseye verknüpfen, aber dieses Mal haben wir keine SVG-Elemente, die uns helfen. Für das Bullseye kennen wir die X- und Y-Koordinaten und seinen Radius im darunter liegenden Bild, daher ist es relativ einfach, einen Kreis für den Bereich zu definieren. Die Pfeilform ist komplizierter. Ich habe https://www.image-map.net verwendet, um die Form zu plotten und den Bereich für die Bildkarte zu generieren – er besteht aus einem Polygon und einem Kreis für die abgerundete Kante oben.

Siehe den Stift
Zielbildkarte von Bailey Jones (@bailey_jones)
auf CodePen.

Clip-Pfad

Was ist, wenn Sie CSS verwenden möchten, um die Form eines benutzerdefinierten Klickbereichs zu definieren, ohne auf JavaScript für das Styling zurückzugreifen? Die CSS-Eigenschaft clip-path bietet erhebliche Flexibilität beim Definieren und Stylen von Zielbereichen auf jedem HTML-Element.

Hier haben wir einen Klickbereich in Form eines fünfzackigen Sterns. Der Stern ist technisch ein Polygon, daher könnten wir ein sternförmiges Basisbild und eine Bildkarte mit entsprechenden Koordinaten verwenden, wie wir es im vorherigen Beispiel mit Bildkarten getan haben. Lassen Sie uns jedoch clip-path verwenden. Das folgende Beispiel zeigt denselben clip-path, der sowohl auf ein JPG-Bild als auch auf ein absolut positioniertes Hyperlink-Element angewendet wird.

Siehe den Stift
Clip-Pfad von Bailey Jones (@bailey_jones)
auf CodePen.

Die Browserunterstützung für clip-path hat sich stark verbessert, aber sie kann für einige Werte immer noch inkonsistent sein. Überprüfen Sie unbedingt die Unterstützung und Herstellerpräfixe, bevor Sie sich darauf verlassen.

Wir können auch verschiedene Ansätze kombinieren, je nachdem, was am besten zur Form eines bestimmten Klickziels passt. Hier habe ich die "geschlossene" Form mit Bennet Freelys Clippy mit einem SVG-Hyperlink-Element kombiniert, um den Anfang eines klickbaren Tic-Tac-Toe-Spiels zu erstellen. SVG ist hier nützlich, um sicherzustellen, dass das "Loch" in der Mitte der "O"-Form nicht klickbar ist. Für das "X" hingegen, das ein Polygon ist, kann ein einzelner clip-path es stylen.

Siehe den Stift
Tic Tac Toe von Bailey Jones (@bailey_jones)
auf CodePen.

Auch hier sollten Sie die Browserunterstützung beachten, insbesondere beim Mischen und Anpassen von Techniken. Die obige Demo wird nicht überall unterstützt.

CSS-Formen ohne transparente Ränder

Die Eigenschaft clip-path ermöglichte es uns, eine vordefinierte Form auf ein beliebiges HTML-Element anzuwenden, einschließlich Hyperlink-Elementen. Es gibt viele weitere Optionen zum Erstellen von HTML- und CSS-Elementen, die keine Quadrate und Rechtecke sind – einige davon finden Sie unter The Shapes of CSS. Allerdings wirken sich nicht alle Techniken auf die Form des Klickbereichs aus, wie Sie vielleicht erwarten. Die meisten Beispiele in "The Shapes of CSS" basieren auf transparenten Rändern, die vom DOM immer noch als Teil Ihres Klickziels erkannt werden, auch wenn Ihre Benutzer sie nicht sehen können. Andere Tricks wie Positionierung, Transformation und Pseudo-Elemente wie ::before und ::after sorgen dafür, dass Ihr gestylter Hyperlink mit seiner sichtbaren Form übereinstimmt.

Hier ist eine CSS-Herzform, die nicht auf transparenten Rändern basiert. Sie können sehen, wie die rote Herzform der einzige klickbare Bereich des Elements ist.

Siehe den Stift
Klickbares Herz von Bailey Jones (@bailey_jones)
auf CodePen.

Hier ist ein weiteres Beispiel, das eine CSS-Dreiecksform mit transparenten Rändern erstellt. Sie können sehen, wie der Klickbereich außerhalb der eigentlichen Form liegt. Fahren Sie mit der Maus über das Element, und Sie können die tatsächliche Größe des Klickbereichs sehen.

Siehe den Stift
klickbares Dreieck von Bailey Jones (@bailey_jones)
auf CodePen.

---

Hoffentlich vermittelt Ihnen dies ein gutes grundlegendes Verständnis der vielen Möglichkeiten, klickbare Bereiche in Bildern und Formen zu erstellen, die sich ausschließlich auf HTML und CSS verlassen. Möglicherweise stellen Sie fest, dass es notwendig ist, JavaScript zu verwenden, um eine fortschrittlichere interaktive Erfahrung zu erzielen. Die kombinierten Kräfte von HTML, CSS und SVG bieten jedoch erhebliche Möglichkeiten, die genaue Form Ihres Klickziels zu steuern.