HTML - Image Links

我們已經了解了如何使用文本創建超文本連結，還學習了如何在網頁中使用圖像。現在，我們將學習如何使用圖像創建超連結。

Example

使用圖像作爲超連結很簡單。我們只需要在超連結中的文本位置使用一個圖像，如下所示;

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

這將生成以下結果，您可以在其中單擊圖像以到達教程點的主頁。

這是使用圖像創建超連結的最簡單方法。接下來我們將看到如何創建滑鼠敏感的圖像連結。

Mouse-Sensitive Images

HTML和XHTML標準提供了一個特性，允許您在單個圖像中嵌入許多不同的連結。可以基於圖像上可用的不同坐標在單個圖像上創建不同的連結。一旦不同的連結附加到不同的坐標，我們就可以單擊圖像的不同部分來打開目標文檔。這種滑鼠敏感的圖像稱爲圖像地圖。

有兩種方法可以創建圖像地圖−

伺服器端圖像映射−這是由<img>標記的is map屬性啓用的，需要訪問伺服器和相關的圖像映射處理應用程式。
客戶端圖像映射−這是使用<img>標記的usemap屬性以及相應的<map>和<area>標記創建的。

Server-Side Image Maps

在這裡，您只需將圖像放在一個超連結中，並使用使其成爲特殊圖像的ismap屬性，當用戶單擊圖像中的某個位置時，瀏覽器將滑鼠指針的坐標以及在<a>標記中指定的URL傳遞給web伺服器。伺服器使用滑鼠指針坐標來確定要傳遞迴瀏覽器的文檔。

使用ismap時，containing<a>標記的ref屬性必須包含伺服器應用程式（如cgi或PHP腳本等）的URL，以便基於傳遞的坐標處理傳入請求。

滑鼠位置的坐標是從圖像左上角開始計算的螢幕像素，從（0,0）開始。前面帶有問號的坐標將添加到URL的末尾。

例如，如果用戶單擊以下圖像左上角的20個像素以上和30個像素以下−

它是由以下代碼片段生成的−

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

然後，瀏覽器將以下搜索參數發送到web伺服器，該伺服器可由ismap.cgi腳本或map file處理，您可以將您喜歡的任何文檔連結到這些坐標−

/cgi-bin/ismap.cgi?20,30

這樣，您可以將不同的連結分配給圖像的不同坐標，單擊這些坐標後，您可以打開相應的連結文檔。要了解有關ismap屬性的更多信息，可以檢查如何使用Image ismap？

注意−學習Perl編程時，您將學習CGI編程。您可以使用PHP或任何其他腳本編寫腳本來處理這些傳遞的坐標。現在，讓我們集中學習HTML，稍後您可以重新訪問本節。

Client-Side Image Maps

客戶端圖像映射由<img/>標記的usemap屬性啓用，並由特殊的<map>和<area>擴展標記定義。

將要形成地圖的圖像作爲普通圖像使用<img/>標記插入到頁面中，但它帶有一個名爲usemap的額外屬性。usemap屬性的值是將在<map>標記中用於連結地圖和圖像標記的值。<map>和<area>標記定義了所有圖像坐標和相應的連結。

地圖標記中的<區域>標記指定形狀和坐標，以定義圖像上每個可單擊熱點的邊界。下面是來自圖像地圖的一個例子−

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

這將產生以下結果&負;

Coordinate System

坐標的實際值完全取決於所討論的形狀。這裡是一個總結，後面是詳細的例子;

礦牀b-rect'x-sub-small sub sub到small.A small sub，y-sub-small\u 1/small-small-small-1-small-sub，x-sub-small sub-second base，small sub-small sub-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south

x₁和y₁是矩形左上角的坐標;x₂和y₂是右下角的坐標。
圓=x_c，y_c，半徑

x_c和y_c是圓中心的坐標，半徑是圓的半徑。以200,50爲中心、半徑爲25的圓將具有屬性coords=「200,50,25」
poly=x₁，y₁，x₂，y₂，x₃，y₃。。。x_n，y_n

各種x-y對定義多邊形的頂點（點），從一個點到下一個點繪製一條「線」。菱形多邊形的頂點在最寬點處爲20、20和40像素，將具有屬性coords=「20、20、40、40、20、60、0、40」。

所有坐標都相對於圖像的左上角（0,0）。每個形狀都有一個相關的URL。你可以使用任何圖像軟體來知道不同位置的坐標。