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.com">
      <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 中的画图工具
打印页面

上一页
下一页
广告