HTML - 图片链接_HTML 菜鸟教程

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

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

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

语法

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


<a href=" destination URL">
	 <img src="image URL" alt="alternative text">
</a>

HTML 图像链接示例

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

为图像创建超链接

在以下示例中，我们使用图像作为超链接。如果执行以下代码，将显示一个图像，如果我们单击它，页面将重定向到 Qikepu.Com 的主页。


<!DOCTYPE html>
<html>
<head>
	 <title>Image Hyperlink Example</title>
</head>
<body>
	 <a href="https://www.qikepu.com">
			<img src="/html/images/logo.png" 
					 alt="启科普教程" 
					 border="0" />
	 </a>
</body>
</html>

鼠标敏感图像

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 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="启科普教程" 
					 ismap/>
	 </a>
</body>
</html>

执行上述代码后，将显示七科普LOGO。当我们单击徽标时，地址栏将显示相应的坐标，如下所示。

这样，我们可以为图像的不同坐标分配不同的链接，当单击这些坐标时，我们将被重定向到链接的文档。要了解有关 ismap 属性的更多信息，请查看如何使用图像 ismap？

客户端图像映射

客户端图像映射由 <img /> 标记的 usemap 属性启用，并由特殊的 <map> 和 <area> 扩展标记定义。<map> 以及 <area> 标签定义了所有图像坐标和相应的链接。地图标签内的 <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 图像中的坐标系

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

形状	坐标	描述
矩形	x₁ ， y₁ ， x₂ ， y₂	其中，x₁ 和 y₁ 是矩形左上角的坐标;x₂ 和 y₂ 是右下角的坐标。
圈	x_c ， y_c ，半径	其中，x_c 和 y_c 是圆心的坐标，radius 是圆的半径。以 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”。

注意：所有坐标都相对于图像的左上角（0,0）。每个形状都有一个相关的 URL。您可以使用任何图像软件来了解不同位置的坐标。例如，在 Windows 中绘制

<< HTML - 文本链接 HTML - 电子邮件链接 >>