HTML - Bildverknüpfungen

Bildlinks erstellen

Um einen Bildlink in HTML zu erstellen, verwenden Sie das <a>-Tag, das für Anker steht. Das <a>-Tag definiert einen Hyperlink und ermöglicht in Kombination mit dem <img>-Tag, ein Bild in einen anklickbaren Link zu verwandeln.

Das <a>-Tag hat mehrere Attribute, aber das wichtigste für die Erstellung von Bildlinks ist das href-Attribut. Das href-Attribut gibt die Ziel-URL an, zu der der Benutzer weitergeleitet wird, wenn er auf den Bildlink klickt. Sie müssen lediglich das <img>-Tag innerhalb des <a>-Tags platzieren und das href-Attribut auf die gewünschte URL setzen.

<a href="https://www.example.com">
  <img src="image.jpg" alt="Klick mich">
</a>

In diesem Beispiel wird das <img>-Tag innerhalb des <a>-Tags platziert und das href-Attribut auf "https://www.example.com" gesetzt. Wenn der Benutzer auf das Bild klickt, wird er zu dieser URL weitergeleitet.

<a href="https://www.example.com" target="_blank" title="Besuche Example.com">
  <img src="image.jpg" alt="Klick mich">
</a>

<style>
  a img {
    border: 2px solid #ddd;
    transition: opacity 0.3s;
  }
  a:hover img {
    border-color: #777;
    opacity: 0.8;
  }
</style>
<a href="https://www.example.com">
  <img src="image.jpg" alt="Klick mich">
</a>

Fortgeschrittene Techniken

Neben einfachen Bildlinks gibt es fortgeschrittene Techniken, um interaktive und dynamische Bildlinks zu erstellen. Zwei solche Techniken sind das Erstellen von Image Maps mit mehreren klickbaren Bereichen und die Verwendung von JavaScript, um Bildlinks zusätzliche Funktionen zu geben.

Image Maps ermöglichen es, mehrere klickbare Bereiche innerhalb eines einzelnen Bildes zu definieren, wobei jeder Bereich seinen eigenen Link oder seine eigene Aktion haben kann. Dies ist nützlich, wenn Sie ein großes Bild mit verschiedenen Abschnitten haben, die Sie klickbar machen möchten, wie zum Beispiel ein Navigationsmenü oder eine Produktübersicht.

Um eine Image Map zu erstellen, verwenden Sie das <map>-Tag zusammen mit dem <area>-Tag. Das <map>-Tag definiert die Image Map, während die <area>-Tags die klickbaren Bereiche innerhalb des Bildes festlegen. Jedes <area>-Tag hat Attribute wie shape, coords und href, um die Form, die Koordinaten und das Linkziel des klickbaren Bereichs anzugeben.

<img src="image.jpg" alt="Image Map" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Link 1">
  <area shape="circle" coords="200,150,50" href="link2.html" alt="Link 2">
  <area shape="poly" coords="300,50,350,100,300,150" href="link3.html" alt="Link 3">
</map>

Das <img>-Tag hat ein usemap-Attribut, das auf das <map>-Tag mit dem Namen "imagemap" verweist. Das <map>-Tag enthält drei <area>-Tags, die jeweils einen anderen klickbaren Bereich mit einer bestimmten Form (Rechteck, Kreis oder Polygon), Koordinaten und einem Linkziel definieren.

Eine weitere Möglichkeit, Bildlinks interaktiver zu gestalten, ist die Verwendung von JavaScript. Mit JavaScript können Sie Ihren Bildlinks dynamisches Verhalten hinzufügen, wie zum Beispiel das Ändern der Bildquelle beim Überfahren mit der Maus, das Anzeigen zusätzlicher Informationen beim Klicken oder das Auslösen benutzerdefinierter Aktionen.

<img id="myImage" src="image.jpg" alt="Click me">
<script>
  document.getElementById("myImage").addEventListener("click", function() {
    alert("You clicked the image!");
  });
</script>

Das <img>-Tag hat ein id-Attribut mit dem Wert "myImage". Der JavaScript-Code verwendet die getElementById-Methode, um das Bildelement auszuwählen und fügt ihm einen Klick-Ereignislistener hinzu. Wenn Sie auf das Bild klicken, wird eine Warnmeldung angezeigt.

Durch die Kombination von Image Maps und JavaScript können Sie hochinteraktive und ansprechende Bildlinks erstellen, die ein reichhaltigeres Benutzererlebnis bieten. Mit diesen Techniken können Sie Benutzer zu verschiedenen Bereichen Ihrer Website führen, zusätzliche Informationen bereitstellen oder bestimmte Aktionen basierend auf der Benutzerinteraktion mit Ihren Bildern auslösen.