HTML - 图像链接

我们已经了解了如何使用文本创建超文本链接，还学习了如何在网页中使用图像。现在，我们将学习如何使用图像来创建超链接。

例子

使用图像作为超链接很简单。我们只需要在文本位置的超链接内使用图像，如下所示 -

<!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>

这将产生以下结果，您可以单击图像到达教程点的主页。

这是使用图像创建超链接的最简单方法。接下来我们将了解如何创建鼠标敏感图像链接。

鼠标敏感图像

HTML 和 XHTML 标准提供了一项功能，允许您在单个图像中嵌入许多不同的链接。您可以根据图像上可用的不同坐标在单个图像上创建不同的链接。一旦不同的链接附加到不同的坐标，我们就可以点击图像的不同部分来打开目标文档。这种鼠标敏感图像被称为图像图。

有两种创建图像映射的方法 -

服务器端图像映射- 这是由<img> 标签的ismap属性启用的，并且需要访问服务器和相关的图像映射处理应用程序。
客户端图像地图- 这是使用<img> 标签的usemap属性以及相应的 <map> 和 <area> 标签创建的。

服务器端图像映射

在这里，您只需将图像放入超链接中并使用ismap属性，这使其成为特殊图像，当用户单击图像中的某个位置时，浏览器会传递鼠标指针的坐标以及 <a> 标记中指定的 URL到网络服务器。服务器使用鼠标指针坐标来确定将哪个文档传送回浏览器。

使用ismap时，包含 <a> 标记的 href 属性必须包含服务器应用程序（如 cgi 或 PHP 脚本等）的 URL，以根据传递的坐标处理传入请求。

鼠标位置的坐标是从图像左上角开始计算的屏幕像素，从 (0,0) 开始。前面带有问号的坐标将添加到 URL 的末尾。

例如，如果用户单击下图左上角上方 20 个像素和下方 30 个像素 -

它是由以下代码片段生成的 -

现场演示

<!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脚本或地图文件进行处理，您可以将任何您喜欢的文档链接到这些坐标 -

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

这样您可以将不同的链接分配给图像的不同坐标，当单击这些坐标时，您可以打开相应的链接文档。要了解更多有关ismap属性的信息，可以查看如何使用图像 ismap？

注意- 当您学习 Perl 编程时，您将学习 CGI 编程。您可以使用 PHP 或任何其他脚本编写脚本来处理这些传递的坐标。现在，让我们集中精力学习 HTML，稍后您可以重新访问本节。

客户端图像映射

客户端图像地图由<img /> 标记的usemap属性启用，并由特殊的 <map> 和 <area> 扩展标记定义。

将形成地图的图像作为普通图像使用 <img /> 标签插入到页面中，只不过它带有一个名为usemap的额外属性。usemap 属性的值是将在 <map> 标记中用于链接地图和图像标记的值。<map> 和 <area> 标签定义所有图像坐标和相应的链接。

地图标签内的 <area> 标签指定形状和坐标，以定义图像上可用的每个可点击热点的边界。这是图像映射的示例 -

现场演示

<!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>

这将产生以下结果 -

坐标系

坐标的实际值完全取决于所讨论的形状。这是一个摘要，后面是详细的示例 -

矩形 = x ₁ , y ₁ , x ₂ , y ₂

x ₁和y ₁是矩形左上角的坐标；x ₂和y ₂是右下角的坐标。
圆 = xc _, yc _,半径

x _c和y _c是圆心的坐标，radius 是圆的半径。以 200,50 为中心、半径为 25 的圆的属性coords = "200,50,25"
聚 = x ₁ , y ₁ , x ₂ , y ₂ , x ₃ , y ₃ , ... x _n , y _n

各种 xy 对定义多边形的顶点（点），并从一个点到下一个点绘制一条“线”。顶点为 20,20，最宽点为 40 像素的菱形多边形的属性coords = "20,20,40,40,20,60,0,40"。

所有坐标均相对于图像的左上角 (0,0)。每个形状都有一个相关的 URL。您可以使用任何图像软件来了解不同位置的坐标。