HTML - 图片链接
上一页
下一页
图片也可以用作 HTML 中的链接，这意味着通过点击图片，我们可以导航到其他网页或资源。HTML 图片链接在创建网站（如图片库、作品集、在线商店等）中非常有用。在本文中，我们将学习如何使用图片创建超链接。它类似于HTML - 文本链接。
要创建HTML 图片链接，我们需要标签和锚点元素。图像元素用于在网页上显示图像，而锚点元素用于指定链接的目标 URL。
这里，href属性的元素包含目标链接，而src属性的标签包含图像的路径。
语法
这里， 元素的href属性包含目标链接， 标签的src属性包含图像的路径。
HTML 图片链接示例
以下是一些解释 HTML 中图片链接用法的示例代码。
为图片创建超链接
在以下示例中，我们使用图像作为超链接。如果您执行以下代码，将显示一个图像，如果我们单击它，页面将重定向到 Tutorials Point 的主页。
alt="Tutorials Point"
border="0" />
鼠标感应图像
HTML 和 XHTML 标准提供了一个功能，允许我们在单个图像中嵌入多个不同的链接。我们可以根据图像上可用的不同坐标在单个图像上创建不同的链接。
一旦将链接附加到所有坐标，单击图像的不同部分将重定向我们到目标文档。此类鼠标感应图像称为图像地图。
创建图像地图有两种方法
服务器端图像地图：这是由ismap属性的标签启用的，需要访问服务器和相关的图像地图处理应用程序。
客户端图像地图：这是使用usemap属性的标签以及相应的
服务器端图像地图
在服务器端图像地图中，我们只需将图像放在超链接内并使用 ismap 属性，这使其成为特殊的图像，当用户单击图像内的某个位置时，浏览器会将鼠标指针的坐标与标签中指定的 URL 一起传递给 Web 服务器。服务器使用鼠标指针坐标确定要传送回浏览器的文档。
当使用ismap时，包含的标签的 href 属性必须包含服务器应用程序（如 CGI 或 PHP 脚本）的 URL，以根据传递的坐标处理传入的请求。
鼠标位置的坐标是从图像左上角开始计算的屏幕像素，以 (0,0) 开始。坐标以问号开头，添加到 URL 的末尾。
以下代码片段演示了服务器端图像地图的使用。
Click on the Image to get its coordinates.
alt="Tutorials Point"
ismap/>
执行上述代码后，将显示 tutorialspoint 徽标。当我们单击徽标时，地址栏将显示相应的坐标，如下所示。
这样，我们可以为图像的不同坐标分配不同的链接，当单击这些坐标时，我们将被重定向到链接的文档。要了解有关 ismap 属性的更多信息，请查看 如何使用 Image ismap？
客户端图像地图
客户端图像地图由标签的usemap属性启用，并由特殊的
将构成地图的图像使用标签作为普通图像插入页面，但它带有一个名为usemap的额外属性。
运行以下代码后，将显示一个带有可点击区域的图像。如果您单击其中一个区域，您将被重定向到该部分的教程。
要了解如何计算 coords 属性的值，您可以访问 coords 属性的解释
Welcome to our interactive map!
Click on a region to visit the
respective language page:
usemap="#langmap"
alt="language Map" />
coords="0,0,180,165"
alt="HTML"
href="html/index.htm"
target="_blank"
hreflang="en" />
coords="180,0,375,167"
alt="JavaScript"
href="javascript/index.htm"
target="_blank"
hreflang="en" />
coords="0,166,180,338"
alt="PHP"
href="/php/index.htm"
target="_blank" hreflang="en" />
coords="180,165,375,338"
alt="ReactJS"
href="reactjs/index.htm"
target="_blank"
hreflang="en" />
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 中的画图工具
打印页面
上一页 下一页
广告