Bild verlinken – anklickbar machen
Mit Bild verlinken können 3 Varianten gemeint sein:
- wir wollen ein Bild anstelle eines Textlinks anklickbar machen, dass dann eine andere HTML-Seite aufgerufen wird
- wir wollen einen Textlink, der nach Anklicken ein Bild anzeigt
- 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 :).
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.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details