【HTML-Element】So betten Sie Bilder ein

Mit dem img-Element können wir Bilder in HTML-Dokumente einbetten.

Um ein Bild einzubetten, müssen Sie die Attribute src und alt verwenden, wie unten gezeigt:

 < img src ="../img/example/img-map.jpg" alt ="Produktbild" width ="580" height ="266" />

Anzeigeeffekt:

1 Einbetten eines Bildes in einen Hyperlink

Eine häufige Verwendung des img-Elements besteht darin, einen bildbasierten Hyperlink in Verbindung mit dem a-Element zu erstellen. Der Code lautet wie folgt:

Es gibt keinen Unterschied in der Art und Weise, wie der Browser dieses Bild anzeigt. Daher ist es wichtig, den Benutzern einen visuellen Hinweis zu geben, dass ein bestimmtes Bild einen Hyperlink darstellt. Der konkrete Ansatz kann die Verwendung von CSS sein und es wäre besser, wenn es im Bildinhalt ausgedrückt werden könnte.

Wenn Sie auf dieses Bild klicken, navigiert der Browser zur URL, die durch das href-Attribut des übergeordneten Elements a angegeben ist. Durch Anwenden des ismap-Attributs auf das img-Element wird ein serverseitiges, teilweise responsives Bild erstellt, d. h. die Position der Klicks auf das Bild wird an die URL angehängt. Erfolgt der Klick beispielsweise 8 Pixel vom oberen Bildrand und 10 Pixel vom linken Rand entfernt, navigiert der Browser zur folgenden URL:

Der folgende Code zeigt den Inhalt von otherpage.html, das ein einfaches Skript zum Anzeigen der Koordinaten der Klickposition enthält:

Sie können die Wirkung von Mausklicks sehen:

Ein serverseitig partitioniertes Antwortbild bedeutet normalerweise, dass der Server je nachdem, auf welchen Bereich des Bildes der Benutzer klickt, unterschiedlich reagiert, z. B. indem er unterschiedliche Antwortinformationen zurückgibt. Wenn Sie das ismap-Attribut des img-Elements weglassen, werden die Koordinaten des Mausklicks nicht in die Anforderungs-URL aufgenommen.

2 Erstellen Sie eine Clientpartitionsantwortkarte

Wir können eine clientseitige, reaktionsfähige Karte erstellen, die es dem Browser ermöglicht, durch Klicken auf verschiedene Bereiche eines Bildes zu verschiedenen URLs zu navigieren. Dieser Prozess muss nicht von einem Server gesteuert werden, daher werden Elemente verwendet, um die verschiedenen Bereiche auf dem Bild und das von ihnen dargestellte Verhalten zu definieren. Das Schlüsselelement der clientseitigen Partitionsantwortkarte ist die Karte. Das Kartenelement enthält ein oder mehrere Flächenelemente, von denen jedes einen anklickbaren Bereich auf dem Bild darstellt.

Die Attribute des Bereichselements können in zwei Kategorien unterteilt werden. Die erste Kategorie befasst sich mit der URL, zu der der Browser navigiert, nachdem der Benutzer auf den durch den Bereich dargestellten Bildbereich geklickt hat. Das folgende Diagramm stellt diese Kategorie von Eigenschaften vor, die den entsprechenden Eigenschaften anderer Elemente ähneln.

Die zweite Kategorie enthält die interessanteren Attribute: Form- und Koordinatenattribute. Mit diesen Attributen können Sie einzelne Bereiche des Bildes kennzeichnen, auf die der Benutzer klicken kann. Die Form- und Koordinatenattribute arbeiten zusammen. Die Bedeutung des Koordinatenattributs hängt vom Wert des Formattributs ab, wie in der folgenden Abbildung dargestellt:

Nachdem wir diese Elemente vorgestellt haben, schauen wir uns ein Beispiel an. Der Code sieht wie folgt aus:

Klicken Sie auf den Link, um den Effekt anzuzeigen: http://yexiaochao.github.io/show4cnblogs/img-map.html

Der Anzeigeeffekt ist derselbe, außer dass beim Klicken auf das entsprechende Produktbild der entsprechende Produktname angezeigt wird, der angibt, zu welcher Produktseite Sie springen.

Die obige Implementierungsmethode zum Einbetten von Bildern [HTML-Element] ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

Original-URL: http://www.cnblogs.com/luka/archive/2016/07/23/5580949.html