HTML - 图像链接

HTML图像链接 - 学习HTML以简单快捷的步骤开发您的网站，从基本概念到高级概念，包括概述，基本标签，元标记，属性，格式，短语标签，评论，字体，拼贴画，图像，链接，表格，框架，列表，布局，颜色，形式，背景，样式表，JavaScript。

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

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

Image Hyperlink Example

Click following link

这将产生以下结果，您可以点击图片进入Tutorials Point的主页.

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

Mouse-Sensitive Images

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

有两种创建图像映射的方法:

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

         ISMAP Hyperlink Example            Click following link

然后，浏览器将以下搜索参数发送到Web服务器，该服务器可以由ismap.cgi脚本或地图文件处理，您可以将所需的任何文档链接到这些坐标:

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

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

注意:在学习Perl编程时，您将学习CGI编程。您可以使用PHP或任何其他脚本编写脚本来处理这些传递的坐标。现在，让我们集中精力学习HTML，稍后您可以重新访问本节。

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

将使用标记作为普通图像插入将要形成地图的图像，但该图像带有一个称为usemap的额外属性。 usemap属性的值是将在标记中用于链接map和image标记的值。和标记一起定义了所有图像坐标和相应的链接。

map标记内的标记指定形状和坐标，以定义图像上可用的每个可单击热点的边界。这是图像图中的示例:

USEMAP Hyperlink Example

Search and click the hotspot

实际值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.您可以使用任何图像软件来了解不同位置的坐标.