Deine erste Homepage
Vertiefungskapitel 10a
Große Bilder

Anmerkung:
Diese Lektion ist eine Ergänzung zur Lektion 10 und setzt voraus, dass du die Lektion 10 durchgearbeitet hast.

Größere Version des Bildes anzeigen [120 kB]

Die einfachste Methode

In Kapitel 6 haben wir gelernt, wie man Links erstellt, die beim Anklicken zu einer anderen Seite/Datei führen.
Diese "andere Datei" muss nicht unbedingt eine HTML-Datei sein, sondern kann auch eine Bilddatei sein.
Hat's geklingelt?

Die Syntax zum Aufruf einer Bilddatei

<a href="img/ferrari_gross.jpg">Größere Version des Bildes anzeigen [120 kB]</a>

ferrari_gross.jpg ist nichts anderes als eine größere Ausgabe deines Bildes, das du vorher mit deinem Bildbearbeitungsprogramm auf eine passende Abmessung gebracht hast.

Vorschlag:
Wähle eine Breite von maximal 800 px und eine Höhe von maximal 600 px, und als Komprimierung/Qualität wieder 85%.

Wichtig:
Keinesfalls darfst du dein im vorherigen Kapitel verkleinertes Bild wieder vergrößern. Das hätte eine fürchterliche Qualität zur Folge. Benutze bitte immer wieder dein unsprüngliches, nicht bearbeitetes Foto als Ausgangspunkt.

Hinweis:
Die - optionale - Angabe [120 kB] im Linktext zeigt deinem Besucher, dass er beim Klicken des Links eine relativ große Datei laden muss, und unter Umständen, je nach Geschwindigkeit seiner Internetanbindung, eine gewisse Wartezeit in Kauf nehmen muss.

Die Erweiterung der einfachsten Methode

Klick mal auf das Bild in dieser Lektion!

Hyperlinks haben eine pfiffige Eigenschaft, die wir uns jetzt zunutze machen: Der Verweistext muss nicht zwingend Text sein! Sondern kann z. B. auch ein Bild sein.
Verwirrt?
Keine Sorge. Wir wiederholen hier einfach die Erklärung aus Lektion 6

Die Syntax für Hyperlinks ist recht einfach:
<a href="Verweisziel">Verweistext</a>

Verweisziel: Verweisziel ist die Adresse der aufzurufenden Datei.
Verweistext: Verweistext ist das, was im Browser angezeigt wird. Der anklickbare Text.

Und jetzt ersetzen wir das Verweisziel durch die große Bilddatei, die wir im vorigen Absatz gerade erstellt haben, und den Verweistext, den anklickbaren Text, durch das Bild, das wir im vorherigen Kapitel eingebunden haben - das auf 400 × 300 px verkleinerte Bild.

Die Syntax zum Aufruf einer Bilddatei durch Klick auf ein Bild

Anmerkung:
Das title-Attribut, also title="klick mich - und ich werde groß" wird angezeigt, wenn wir mit der Maus über das Bild fahren.

Empfehlung:
Wenn du größere Versionen von Bildern anbieten willst, dann ist es am besten, du kombinierst beide Methoden. Also sowohl das Bild anklickbar machen - das erwarten viele Besucher - als auch einen anklickbaren Textlink unter das Bild.
Unter? Du erinnerst dich an den <br /> Tag zum Erzwingen eines Zeilenumbruchs?

Was haben wir in dieser Lektion gelernt?

Verschiedene Methoden, größere Versionen von Bildern anzubieten.