Wie kann ich ein Bild mit einem Link verknüpfen? (Teaser-Technik)
In einigen Situationen ist es hilfreich, wenn ein Bild gleichzeitig auch als Link fungieren kann. Der (fiktive) Pianist Martin Timmer macht es vor: Er hat seinen Flügel im Klavierhaus Köpenick gekauft und möchte nun die Besucher seiner Webseite auf das exzellente Angebot an Flügeln und Klavieren aufmerksam machen.
Mit der hier gezeigten "Teaser"-Methode kannst Du auch hervorragend eine Reihe von Partnern, Veranstaltungstipps, Kollegen - oder einfach nur eine Übersichtsseite zu Inhalten auf Deiner Homepage erstellen.
Lege einen einfachen Abschnitt an und wähle eine Darstellungsoption mit Bild aus dem Dropdown-Menü
Unterhalb der Textbox erscheint nun die Möglichkeit, ein Bild hochzuladen.
Klicke auf "Bild hinzufügen" und wähle ein Bild von Deiner Festplatte.
Beschrifte Dein Bild, wähle (bzw. korrigiere) den Bildausschnitt und füge einen Link ein.
Klicke zunächst auf das Bleistift-Symbol, um in den Bearbeitungsbereich zu gelangen.
Die Beschriftung Deines Bildes ist aus verschiedenen Dingen wichtig: Sie erscheint, wenn das Bild einmal nicht geladen werden kann (z. B. bei langsamer Internetverbindung), wird sehbehinderten Menschen vorgelesen, die einen Screenreader benutzen - und wird von Google ausgewertet, um das Bild besser zuzuordnen.
Ausserdem erscheint in den meisten Browsern dieser Text, wenn man mit der Maus über das Bild fährt. In unserem Fall ist das besonders wichtig, da dem Besucher damit erklärt wird, wohin ein Klick auf das Bild führt.
Den Bildausschnitt kannst Du mit der Maus korrigieren, indem Du auf einen der 9 Punkte auf der gestrichelten Linie anklickst und anschließend (bei gedrückter Maustaste) ziehst. Tipp: Wenn Du zusätzlich dabei die Shift-Taste ( ⇧ ) gedrückt hälst, wird das Seitenverhältnis quadratisch.
Beim Link achte unbedingt darauf, mit "http://" oder "https://" zu beginnen. Am besten öffnest Du die Seite, auf die Du verlinken möchtest, vorher in einem neuen Browserfenster und kopierst die URL von dort in die Zwischenablage. So kannst Du sicher gehen, dass Du keine Tippfehler produzierst.
Zum Schluss kannst Du noch auswählen, ob sich der Bild-Link durch einen Klick in der aktuellen Seite oder einen neuen Fenster öffnen soll.
Fertig ist Martins kleiner Hinweis auf das Klavierhaus Köpenick
Wenn der Besucher mit der Maus über das Bild fährt, erscheint die Beschriftung, die Du eingegeben hast. Der Cursor suggeriert, dass das Bild anklickbar ist.
Anwendungsbeispiel: Teaser auf der Startseite
Der Musikwissenschaftler und Musikpädagoge Mathias Schillmöller nutzt die Funktion, um wichtige Inhalte seiner Webseite auf der Startseite hervorzuheben.
Bonus-Tipp: Bereichere Deine Teaser mit Buttons
Wenn Du Deine Links noch mehr hervorheben möchtest, verwandle Deine Links doch einfach in Buttons. Hier haben wir zusammengestellt, was Du tun musst, um einen Link als Button darstellen zu können.