HTML-Bild zum Springen anklicken

Im Webdesign ist es häufig notwendig, Links zu Bildern hinzuzufügen, damit Benutzer durch Klicken auf das Bild zu einer bestimmten Seite oder Linkadresse springen können. Es ist sehr einfach, diese Funktion in der HTML-Sprache zu implementieren. In diesem Artikel stellen wir vor, wie man HTML zum Schreiben von Bildklicksprüngen verwendet.

Zuerst müssen wir das img-Tag in HTML verwenden, um ein Bild einzufügen. Der Beispielcode lautet wie folgt:

<img src="图片地址">

Dabei gibt das src-Attribut den Pfad oder die Linkadresse des Bildes an. Zum Beispiel:

<img src="https://picsum.photos/200">

Dadurch wird ein zufälliges 200x200-Bild von picsum.photos in die Webseite eingefügt.

Als nächstes müssen wir einen Link zu diesem Bild hinzufügen. Die Link-Funktion kann mithilfe des a-Tags in HTML implementiert werden. Der Beispielcode lautet wie folgt:

<img src="图片地址">

Darunter gibt das href-Attribut die Linkadresse an, zum Beispiel:

<img src="https://picsum.photos/200">

Dadurch wird ein Link hinzugefügt. Wenn Sie auf das Bild klicken, gelangen Sie zur Baidu-Homepage.

Aber was ist, wenn dieser Link in einem neuen Fenster geöffnet werden soll? Diese Funktion kann mit dem Zielattribut erreicht werden:

<img src="图片地址">

Unter anderem gibt das Zielattribut das Fenster an, in dem der Link geöffnet werden soll. Hier wird „_blank“ verwendet, um das Öffnen des Links anzuzeigen ein neues Fenster, zum Beispiel:

<img src="https://picsum.photos/200">

Dies wird im Bild angezeigt. Fügen Sie einen Link hinzu, um die Baidu-Homepage in einem neuen Fenster zu öffnen.

Zusätzlich zum Einfügen des IMG-Tags in das A-Tag, um einen Bildklick-Sprung zu realisieren, kann dies auch durch CSS-Stile erreicht werden. Verwenden Sie das Attribut „Hintergrundbild“ in CSS, um ein Bild in den Hintergrund des Elements einzufügen, und wenden Sie dann das Tag „a“ an, um den Link zu implementieren. Der Beispielcode lautet wie folgt:

<a href="链接地址" target="_blank" style="background-image: url(图片地址); display: block; width: 宽度; height: 高度;"></a>

Unter anderem gibt das Attribut „style“ den Stil von an der Link, einschließlich Hintergrundbild, Breite und Höhe usw., zum Beispiel:

<a href="https://www.baidu.com" target="_blank" style="background-image: url(https://picsum.photos/200); display: block; width: 200px; height: 200px;"></a>

Dadurch wird ein zufälliges 200x200-Bild in die Webseite eingefügt, und wenn darauf geklickt wird, öffnet sich die Baidu-Homepage in einem neuen Fenster.

Zusammenfassend lässt sich sagen, dass Sie zum Erreichen eines Bildklicksprungs das a-Tag und das img-Tag in HTML verwenden müssen, um den Sprung durch Hinzufügen der Linkadresse und des Zielattributs zu erreichen. Dies kann auch über die Eigenschaft „background-image“ in CSS erreicht werden. Diese Funktion ist für das Webdesign sehr wichtig. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, das Webdesign besser zu vervollständigen.

Das obige ist der detaillierte Inhalt vonHTML-Bild zum Springen anklicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!