图像链接（Image Links）

优质

小牛编辑

125浏览

2023-12-01

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

例子 (Example)

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

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

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

Mouse-Sensitive Images

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

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

Server-side image maps - 这是通过“img”标记的ismap属性启用的，并且需要访问服务器和相关的图像映射处理应用程序。
Client-side image maps - 使用“img”标记的usemap属性以及相应的“map”和“area”标记创建。

服务器端图像映射

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

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

鼠标位置的坐标是从图像的左上角开始计算的屏幕像素，以（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 = "xnip" border = "0"/> 
      </a>
   </body>
</html>

然后浏览器将以下搜索参数发送到Web服务器，该服务器可以由ismap.cgi脚本或map file ，您可以将您喜欢的任何文档链接到这些坐标 -

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

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

Note - 学习Perl编程时，您将学习CGI编程。您可以编写脚本来使用PHP或任何其他脚本处理这些传递的坐标。现在，让我们专注于学习HTML，稍后您可以重新访问此部分。

客户端图像映射

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

将使用表格将要形成地图的图像插入到页面中标记为普通图像，但它带有一个名为usemap的额外属性。 usemap属性的值是将在“map”标记中用于链接地图和图像标记的值。 “map”和“area”标签定义了所有图像坐标和相应的链接。

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

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

坐标系

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

rect = x ₁ , y ₁ , x ₂ , y ₂
x ₁和y ₁是矩形左上角的坐标; x ₂和y ₂是右下角的坐标。
circle = x _c , y _c , radius
x _c和y _c是圆心的坐标，半径是圆的半径。以200,50为中心，半径为25的圆将具有属性coords = "200,50,25"
poly = 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。您可以使用任何图像软件来了解不同位置的坐标。