HTML - 圖片連結

上一頁
下一頁

圖片也可以用作 HTML 中的連結，這意味著透過點選圖片，我們可以導航到其他網頁或資源。HTML 圖片連結在建立網站（如圖片庫、作品集、線上商店等）中非常有用。在本文中，我們將學習如何使用圖片建立超連結。它類似於HTML - 文字連結。

要建立HTML 圖片連結，我們需要<img>標籤和錨點元素。影像元素用於在網頁上顯示影像，而錨點元素用於指定連結的目標 URL。

這裡，href屬性的<a>元素包含目標連結，而src屬性的<img>標籤包含影像的路徑。

語法

這裡，<a> 元素的href屬性包含目標連結，<img> 標籤的src屬性包含影像的路徑。

<a href=" destination URL">
   <img src="image URL" alt="alternative text">
</a>

HTML 圖片連結示例

以下是一些解釋 HTML 中圖片連結用法的示例程式碼。

為圖片建立超連結

在以下示例中，我們使用影像作為超連結。如果您執行以下程式碼，將顯示一個影像，如果我們單擊它，頁面將重定向到 Tutorials Point 的主頁。

<!DOCTYPE html>
<html>
<head>
   <title>Image Hyperlink Example</title>
</head>
<body>
   <a href="https://tutorialspoint.tw">
      <img src="/html/images/logo.png" 
           alt="Tutorials Point" 
           border="0" />
   </a>
</body>
</html>

滑鼠感應影像

HTML 和 XHTML 標準提供了一個功能，允許我們在單個影像中嵌入多個不同的連結。我們可以根據影像上可用的不同座標在單個影像上建立不同的連結。

一旦將連結附加到所有座標，單擊影像的不同部分將重定向我們到目標文件。此類滑鼠感應影像稱為影像地圖。

建立影像地圖有兩種方法

  • 伺服器端影像地圖：這是由ismap屬性的<img>標籤啟用的，需要訪問伺服器和相關的影像地圖處理應用程式。
  • 客戶端影像地圖：這是使用usemap屬性的<img>標籤以及相應的 <map>和 <area>標籤建立的。

伺服器端影像地圖

在伺服器端影像地圖中，我們只需將影像放在超連結內並使用 ismap 屬性，這使其成為特殊的影像，當用戶單擊影像內的某個位置時，瀏覽器會將滑鼠指標的座標與<a>標籤中指定的 URL 一起傳遞給 Web 伺服器。伺服器使用滑鼠指標座標確定要傳送回瀏覽器的文件。

當使用ismap時，包含的<a>標籤的 href 屬性必須包含伺服器應用程式（如 CGI 或 PHP 指令碼）的 URL，以根據傳遞的座標處理傳入的請求。

滑鼠位置的座標是從影像左上角開始計算的螢幕畫素，以 (0,0) 開始。座標以問號開頭，新增到 URL 的末尾。

以下程式碼片段演示了伺服器端影像地圖的使用。

<!DOCTYPE html>
<html>
<head>
   <title>ISMAP Hyperlink Example</title>
</head>
<body>
   <p>
      Click on the Image to get its coordinates. 
   </p>
   <a href="#" target="_self">
      <img src="/images/logo.png" 
           alt="Tutorials Point" 
           ismap/>
   </a>
</body>
</html>

執行上述程式碼後，將顯示 tutorialspoint 徽標。當我們單擊徽標時，位址列將顯示相應的座標，如下所示。

isamp_example

這樣，我們可以為影像的不同座標分配不同的連結，當單擊這些座標時，我們將被重定向到連結的文件。要了解有關 ismap 屬性的更多資訊，請檢視 如何使用 Image ismap？

客戶端影像地圖

客戶端影像地圖由<img />標籤的usemap屬性啟用，並由特殊的<map>和<area>擴充套件標籤定義。<map>以及<area>標籤定義所有影像座標和相應的連結。<map>標籤內的<area>標籤指定形狀和座標以定義影像上每個可點選熱點的邊界。

將構成地圖的影像使用<img />標籤作為普通影像插入頁面，但它帶有一個名為usemap的額外屬性。

執行以下程式碼後，將顯示一個帶有可點選區域的影像。如果您單擊其中一個區域，您將被重定向到該部分的教程。

要了解如何計算 coords 屬性的值，您可以訪問 coords 屬性的解釋

<!DOCTYPE html>
<html lang="en">

<body>
   <h1>Welcome to our interactive map!</h1>
   <p>
      Click on a region to visit the 
      respective language page:
   </p>
   <img src="/html/images/lang.jpg" 
        usemap="#langmap" 
        alt="language Map" />

   <map name="langmap">
      <area shape="rect" 
            coords="0,0,180,165" 
            alt="HTML" 
            href="html/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="180,0,375,167" 
            alt="JavaScript" 
            href="javascript/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="0,166,180,338" 
            alt="PHP" 
            href="/php/index.htm" 
            target="_blank" hreflang="en" />
      <area shape="rect" 
            coords="180,165,375,338" 
            alt="ReactJS" 
            href="reactjs/index.htm" 
            target="_blank" 
            hreflang="en" />
   </map>
</body>
</html>

HTML 影像中的座標系

座標的實際值完全取決於可點選區域的形狀。讓我們瞭解不同形狀的座標。

形狀 座標 描述
矩形 x1 , y1 , x2 , y2 其中，x1 和 y1 是矩形左上角的座標；x2 和 y2 是右下角的座標。
圓形 xc , yc , 半徑 其中，xc 和 yc 是圓心的座標，半徑是圓的半徑。以 200,50 為中心、半徑為 25 的圓將具有屬性 coords="200,50,25"。
多邊形 x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn 各種 x-y 對定義了多邊形的頂點（點），從一個點到下一個點繪製“線”。一個菱形多邊形，其頂點在 20,20 處，最寬處為 40 畫素，將具有屬性 coords="20,20,40,40,20,60,0,40"。
注意：所有座標都相對於影像的左上角 (0,0)。每個形狀都有一個相關的 URL。您可以使用任何影像軟體來了解不同位置的座標。例如 Windows 中的畫圖工具
列印頁面

上一頁
下一頁
廣告