Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Links, Hyperlinks <a href> » Bild verlinken

Bild verlinken – anklickbar machen

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 ein 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.

<a href="index.htm">LINKTEXT</a>

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

<img src="html-seminar.jpg">

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

<a href="index.htm"><img src="html-seminar.jpg"></a>

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 unseren HTML-Befehl im Attribut „href“.

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

<a href="html-seminar.jpg">Bild in groß anzeigen</a>

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 mit der gewünschten Auflösung und Qualität und ein Vorschaubild in einer kleinen Abmessung. Und nun wird wieder unsere 2 Befehle für Link erstellen und Bild anzeigen kombiniert:

<a href="html-seminar-gross.jpg"><img src="html-seminar-vorschaubild.jpg"></a>

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

<img src="html-seminar.jpg" width="474" height="66">

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. Technisch geht das problemlos, nur wird dann jedes Mal, wenn die HTML-Seite angesehen wird auch das große Bild, dass auch eine größere Dateigröße hat, mit ü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

<a href="html-seminar-gross.jpg"><img src="html-seminar-gross.jpg" width="72" height="10"></a>

Bindet man ein kleines Vorschaubild ein, dann wird nur dieses geladen, wenn die Seite angezeigt wird und das große Vorschaubild wird erst geladen, wenn der Besucher darauf klickt! Daher 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 ein Bild als Link Sinn ergibt und jedem Benutzer sofort klar ist, dass er auch darauf klicken kann.

#klugscheissermodus: Bilder verlinken

#klugscheissermodus: Früher (vor langer langer Zeit) wurden Steuerungen anhand von kleinen Grafiken aufgebaut und genau in der obigen beschriebenen Form eingebunden. Heute macht man das bestenfalls mit in Grafik gesetzten E-Mail-Adressen, damit Spam-Roboter diese nicht so einfach einsammeln können.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details