Bild als link

Mit Bild verlinken können 3 Varianten gemeint sein:

1. wir wollen ein Bild anstelle eines Textlinks anklickbar machen, dass dann eine andere HTML-Seite aufgerufen wird
2. wir wollen einen Textlink, der nach Anklicken ein Bild anzeigt
3. kleines Vorschaubild zeigt nach Anklicken einer großes Bild

Alle Varianten der Reihe nach im folgenden Tutorial.

Bilder anklickbar machen – Bild zu einem Link machen

Genauso wie Text können wir auch ein Bild zu einem anklickbaren „Link“ machen. Die Technik ist exakt gleich wie schon beim PDF gezeigt bzw. wie beim Erstellen eines Links.

Jetzt benötigen wir einer Bild – dieses wird in HTML eingebunden wie im entsprechenden Bilder-Kapitel beschrieben.

Der HTML-Befehl für den Einbettung eines Bildes wird nun anstelle des Linktextes in unseren Link integriert:

Das war es – so kann man ein Bild verlinken sprich aus einem Bild ein Link erstellen.

Variante 2: Link erstellen, der dann ein Bild anzeigt

Möchten wir einen normalen Textlink haben, der nach Anklicken dann ein Bild anzeigt, ist dies die gleiche Vorgehensweise. Wir platzieren nur unser HTML-Befehl im Attribut „href“.

Aus den zwei oben geteilten Befehlen für Link erstellen und Bild anzeigen ergibt sich damit:

Variante 3: kleines Vorschaubild zeigt nach anklicken großes Bild

Für diese Variante für Bild anzeigen benötigen wir i.d.R. 2 Bilder: das große Bild mittels der gewünschten Auflösung und Qualität und ein Vorschaubild in einer kleinen Abmessung. Und nun wird erneut unsere 2 Befehle für Link erstellen und Bild anzeigen kombiniert:

Natürlich sollten alle üblichen Attribute für ein Bild mit aufgenommen werden (siehe Kapitel uber Grafiken). Dazu gehören die Breite und die Höhe:

Jetzt könnte man auf die Idee kommen, dass man für das Vorschaubild das Bild mit der hohen Auflösung nimmt und einfach nur die Breite (width) und die Höhe (height) als Zahl ändert. Technologisch geht das problemlos, nur wird dann jedes Zeit, wenn die HTML-Seite angesehen wird auch das riesige Bild, dass auch eine größere Dateigröße hat, mittels übertragen und macht die Webseite langsamer.

NICHT machen – aussehen würde das so:

Aus der Höhe von 66 würden 10 Pixel und aus den 474 Pixel Breite würden 72 Pixel

Bindet man ein kleines Vorschaubild ein, dann wird nur dieses geladen, wenn das Seite angezeigt wird und das große Vorschaubild wird erst geladen, wenn der Besucher darauf klickt! Deshalb bitte diese Variante wählen!

Grundsätzliches zu anklickbaren Bildern

Oft ist es für den Besucher nicht ersichtlich, dass er auf ein Bild klicken kann. Somit hilft das nicht weiter und die Inhalte hinter dem Link erhalten weniger Besucher.

Daher bitte genau überlegen, ob einer Bild als Link Sinn ergibt und jedem Benutzer sofort klar ist, dass er auch darauf klicken kann.

#klugscheissermodus: Bilder verlinken

#klugscheissermodus: Früher (vor länger langer Zeit) wurden Steuerungen anhand von kleinen Grafiken aufgebaut und genau in der obigen beschriebenen Form eingebunden.

PDFs als DownloadLink mit Sprungmarke