我们已经看到了如何使用文本创建超文本链接，我们还学习了如何在我们的网页中使用图像.现在，我们将学习如何使用图像来创建超链接.
将图像用作超链接很简单.我们只需要在文本位置的超链接内使用图像，如下所示 :
<!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.IT屋.com" target = "_self"> <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a> </body> </html>
这将产生以下结果，您可以点击图片进入Tutorials Point的主页.
这是使用图像创建超链接的最简单方法。 接下来，我们将看到如何创建鼠标敏感图像链接。
HTML和XHTML标准提供了一项功能，使您可以在单个图像中嵌入许多不同的链接。 您可以基于图像上可用的不同坐标在单个图像上创建不同的链接。 将不同的链接附加到不同的坐标后，我们可以单击图像的不同部分以打开目标文档。 这种对鼠标敏感的图像称为图像图。
有两种创建图像映射的方法:
服务器端图像映射:这是通过<img>标记的ismap属性启用的，并且需要访问服务器和相关的图像映射处理应用程序。
客户端图像地图:这是通过<img>标签的usemap属性以及相应的<map>和<area>标签创建的。
在这里，您只需将图像放在超级链接中，并使用ismap属性即可使其成为特殊图像，并且当用户单击图像中的某个位置时，浏览器将鼠标指针的坐标以及<a>标记中指定的URL传递给 到网络服务器。 服务器使用鼠标指针坐标来确定将哪个文档传递回浏览器。
使用ismap时，包含<a>标记的href属性必须包含服务器应用程序的URL，例如cgi或PHP脚本等，以便根据传递的坐标来处理传入的请求。
鼠标位置的坐标是从图像的左上角开始计数的屏幕像素，从（0,0）开始。 坐标（前面带有问号）被添加到URL的末尾。
例如，如果用户单击以下图像左上角上方的20个像素和向下的30个像素:
由以下代码段生成:
<!DOCTYPE html> <html> <head> <title>ISMAP Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "/cgi-bin/ismap.cgi" target = "_self"> <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a> </body> </html>
然后，浏览器将以下搜索参数发送到Web服务器，该服务器可以由ismap.cgi脚本或地图文件处理，您可以将所需的任何文档链接到这些坐标:
/cgi-bin/ismap.cgi?20,30
这样，您可以将不同的链接分配给图像的不同坐标，并且在单击这些坐标时，可以打开相应的链接文档。 要了解有关ismap属性的更多信息，可以查看如何使用图像ismap？
注意:在学习Perl编程时，您将学习CGI编程。 您可以使用PHP或任何其他脚本编写脚本来处理这些传递的坐标。 现在，让我们集中精力学习HTML，稍后您可以重新访问本节。
客户端图像映射由<img />标记的usemap属性启用，并由特殊的<map>和<area>扩展标记定义。
将使用<img />标记作为普通图像插入将要形成地图的图像，但该图像带有一个称为usemap的额外属性。 usemap属性的值是将在<map>标记中用于链接map和image标记的值。 <map>和<area>标记一起定义了所有图像坐标和相应的链接。
map标记内的<area>标记指定形状和坐标，以定义图像上可用的每个可单击热点的边界。 这是图像图中的示例:
<!DOCTYPE html> <html> <head> <title>USEMAP Hyperlink Example</title> </head> <body> <p>Search and click the hotspot</p> <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/> <!-- Create Mappings --> <map name = "html"> <area shape = "circle" coords = "80,80,20" href = "/css/index.htm" alt = "CSS Link" target = "_self" /> <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" href = "/jquery/index.htm" target = "_self" /> </map> </body> </html>
实际值coords完全取决于所讨论的形状.以下是摘要，后面是详细示例 :
rect = x 1 ，y 1 ，x 2 ，y
x 1 和y 1 是矩形左上角的坐标; x 2 和y 2 是右下角的坐标.
circle = x c ，y c ，radius
x c 和y c 是圆心的坐标，半径是圆的半径.以200,50为中心，半径为25的圆将具有属性 coords ="200,50,25"
poly = x 1 ，y 1 ，x 2 ，y 2 ，x 3 ，y 3 ，... x n ，y n
各种xy对定义多边形的顶点(点)，从一个点到下一个点绘制"线".一个菱形多边形，其顶点在最宽点处为20,20和40像素，将具有属性 coords ="20,20,40,40,20,60,0,40".
所有坐标都相对于图像的左上角(0,0).每个形状都有一个相关的URL.您可以使用任何图像软件来了解不同位置的坐标.
