如何在 HTML 中使用影像作為連結？

我們可以將影像新增為連結，以及其他HTML元素作為連結。連結是從一個網頁到另一個網頁的連線。

我們可以在網頁中新增頁面連結。HTML 連結是超連結。<a>標籤定義了一個超連結，用於從一個頁面連結到另一個頁面。href 屬性與<a>標籤一起使用，用於指示連結的目標。

要在 HTML 頁面中建立頁面連結，請使用 <a> 和 </a> 標籤，並使用 href 屬性定義連結。我們應該在 <body>…</body> 標籤內使用 <a>…</a> 標籤。

語法

以下是將影像新增為網頁連結的語法。

<a href="link address"><img src="image destination"></a>

示例

以下是用影像作為連結的示例程式。

<!DOCTYPE html>
<html>
<body>
   <p><a href="https://www.Youtube.com/"><img src="https://tutorialspoint.tw/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;"></a></p>
</body>
</html>

以下是將影像作為連結的輸出，點選影像將導航到谷歌主頁。

示例

以下是用影像作為連結的示例程式。

<!DOCTYPE html>
<html>
<body>
   <center>
      <h2>Image as a Link</h2>
      <a href="https://tutorialspoint.tw"><img src="https://tutorialspoint.tw/assets/questions/media/426142-1668760765.png" alt="Tutorialspoint" style="width:50px;height:60px;"></a>
   </center>
</body>
</html>

以下是將影像作為連結的輸出，點選影像將導航到目標網頁。

示例

以下是另一個用影像作為連結的示例程式。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Image as link</title>
</head>
<body>
   The following image works as a link:<br>
   <a href="https://www.qries.com/">
      <img alt="Qries" src="https://www.qries.com/images/banner_logo.png" width=150" height="70">
   </a>
</body>
</html>

點選影像後，它將重定向到目標網頁。

更新於: 2023年8月29日

336K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告