HTML - 图片链接

原创

admin 4个月前 (08-07) 阅读数 19 #HTML

HTML - 图片链接

在HTML中，图片也可以用作链接，这意味着通过点击图片我们可以导航到其他网页或资源。HTML图片链接在创建照片库、作品集、在线商店等网站时非常有用。在本文中，我们将学习如何使用图片创建超链接。这与HTML - 文本链接类似。

创建图片链接

要创建HTML图片链接，我们需要一个<img>标签和一个锚点元素。图片元素用于在网页上显示图片，而锚点元素用于指定链接的目标URL。

在这里，<a>元素的href属性包含目标链接，<img>标签的src属性包含图片的路径。

语法

在这里，<a>元素的href属性包含目标链接，<img>标签的src属性包含图片的路径。

<a href="目标URL">
   <img src="图片URL" alt="替代文本">
</a>

HTML图片链接示例

以下是一些示例代码，解释了HTML中图片链接的用法：

为图片创建超链接
带工具提示的图片链接
鼠标敏感图片
- 服务器端图片映射
- 客户端图片映射

为图片创建超链接

在下面的示例中，我们使用图片作为超链接。如果您执行以下代码，将显示一张图片，如果我们点击它，页面将重定向到Tutorials Point的主页。

示例

<!DOCTYPE html>
<html>
<head>
   <title>图片超链接示例</title>
</head>
<body>
   <a href="https://www.tutorialspoint.com">
      <img src="/html/images/logo.png" 
           alt="Tutorials Point" 
           border="0" />
   </a>
</body>
</html>

您还可以为图片链接定义工具提示；当有人将鼠标悬停在链接的图片上时，它将显示工具提示。要设置工具提示，您可以设置<a>标签的title属性。

示例

以下示例演示了图片链接的工具提示：

<!DOCTYPE html>
<html>
<head>
   <title>图片超链接示例</title>
</head>
<body>
   <a href="https://www.tutorialspoint.com" title="前往TutorialsPoint">
      <img src="/html/images/logo.png" 
           alt="Tutorials Point" 
           border="0" />
   </a>
</body>
</html>

在上述示例中，将鼠标悬停在徽标上将显示工具提示"前往TutorialsPoint"。

鼠标敏感图片

HTML和XHTML标准提供了一个功能，允许我们在单个图片中嵌入多个不同的链接。我们可以根据图片上可用的不同坐标在单个图片上创建不同的链接。

一旦所有坐标都附加了链接，点击图片的不同部分将把我们重定向到目标文档。这种鼠标敏感的图片称为图片映射。

创建图片映射有两种方式：

服务器端图片映射：这通过<img>标签的ismap属性启用，需要访问服务器和相关的图片映射处理应用程序。
客户端图片映射：这是通过<img>标签的usemap属性创建的，配合相应的<map>和<area>标签。

服务器端图片映射

在服务器端图片映射中，我们简单地将图片放在超链接内，并使用ismap属性，这使它成为特殊图片，当用户点击图片内的某个位置时，浏览器将鼠标指针的坐标与<a>标签中指定的URL一起传递给Web服务器。服务器使用鼠标指针坐标确定要返回给浏览器的文档。

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

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

示例

以下代码片段演示了服务器端图片映射的使用。

<!DOCTYPE html>
<html>
<head>
   <title>ISMAP超链接示例</title>
</head>
<body>
   <p>
      点击图片获取其坐标。
   </p>
   <a href="#" target="_self">
      <img src="/images/logo.png" 
           alt="Tutorials Point" 
           ismap/>
   </a>
</body>
</html>

执行上述代码后，将显示tutorialspoint徽标。当我们点击徽标时，地址栏将显示相应的坐标，如下所示：

这样，我们可以为图片的不同坐标分配不同的链接，当点击这些坐标时，我们将被重定向到链接的文档。要了解更多关于ismap属性的信息，请查看HTML ismap属性

客户端图片映射

客户端图片映射通过<img />标签的usemap属性启用，并由特殊的<map>和<area>扩展标签定义。<map>与<area>标签一起定义所有图片坐标和相应的链接。map标签内的<area>标签指定形状和坐标，以定义图片上每个可点击热点的边界。

将要形成映射的图片使用<img />标签作为普通图片插入页面，但它携带一个名为usemap的额外属性。

运行以下代码后，将显示带有可点击区域的图片。如果您点击其中一个区域，您将被重定向到该部分的教程。

要了解coords属性值的计算方式，您可以查看coords属性的解释。

示例

<!DOCTYPE html>
<html lang="zh-CN">

<body>
   <h1>欢迎来到我们的交互式地图！</h1>
   <p>
      点击一个区域访问相应的
      语言页面：
   </p>
   <img src="/html/images/lang.jpg" 
        usemap="#langmap" 
        alt="语言地图" />

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

HTML图片中的坐标系统

坐标的实际值完全取决于可点击区域的形状。让我们了解不同形状的坐标。

形状	坐标	描述
矩形	x₁ , y₁ , x₂ , y₂	其中x₁和y₁是矩形左上角的坐标；x₂和y₂是矩形右下角的坐标。
圆形	x_c , y_c , 半径	其中x_c和y_c是圆心的坐标，半径是圆的半径。一个以200,50为中心，半径为25的圆将具有属性coords="200,50,25"。
多边形	x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n	各种x-y对定义多边形的顶点（点），从一点到下一点绘制一条"线"。一个菱形多边形，其顶点在20,20，最宽处为40像素，将具有属性coords="20,20,40,40,20,60,0,40"。