HTML图片链接
我们已经了解了如何使用文本创建超文本链接，并且还学习了如何在网页中使用图像。现在，我们将学习如何使用图像创建超链接。
将图像用作超链接很简单。我们只需要在超链接内的文本位置使用一个图像，如下所示：
<!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.newbiego.com" target = "_self"> <img src = "/images/logo.png" alt = "Newbie Go" border = "0"/> </a> </body> </html>
这将产生以下结果，你可以在其中单击图像以到达Newbie Go的主页。
这是使用图像创建超链接的最简单方法。接下来，我们将看到如何创建鼠标敏感图像链接。
鼠标敏感图像
HTML和XHTML标准提供了一项功能，使你可以在单个图像中嵌入许多不同的链接。你可以基于图像上可用的不同坐标在单个图像上创建不同的链接。将不同的链接附加到不同的坐标后，我们可以单击图像的不同部分以打开目标文档。这种对鼠标敏感的图像被称为图像图。
有两种创建图像映射的方法：
服务器端图像映射：这是由ismap标签的
属性，需要访问服务器和相关的图像地图处理应用程序。
客户端图像图：这是用usemap标签的
属性，以及相应的
服务器端图像映射
在这里，你只需将图片放在超级链接中并使用ismap属性，该属性使其成为特殊图像，并且当用户单击图像中的某个位置时，浏览器将鼠标指针的坐标以及标记中指定的URL传递给Web服务器。服务器使用鼠标指针坐标来确定将哪个文档传递回浏览器。
When ismap 使用时，包含的标记的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 = "Newbie Go" border = "0"/> </a> </body> </html>
然后，浏览器将以下搜索参数发送到Web服务器，该参数可以由ismap.cgi脚本或map file你可以将所需的任何文档链接到这些坐标：
/cgi-bin/ismap.cgi?20,30
这样，你可以将不同的链接分配给图像的不同坐标，并且在单击这些坐标时，可以打开相应的链接文档。要了解更多有关ismap属性，你可以检查 如何使用图像ismap？
注意：学习Perl编程时，你将学习CGI编程。你可以使用PHP或任何其他脚本编写脚本来处理这些传递的坐标。现在，让我们集中精力学习HTML，稍后你可以重新访问本节。
客户端图像映射
客户端图像映射由usemap标记的属性，并由特殊的
将要形成地图的图像使用标记作为普通图像插入到页面中，不同之处在于它带有一个额外的属性，称为usemap。 usemap属性的值是将在
map标记内的标记指定形状和坐标，以定义图像上可用的每个可单击热点的边界。这是图像图中的示例：
<!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>
这将产生以下结果：
坐标系
坐标的实际值完全取决于所讨论的形状。这是一个摘要，后面是详细的示例：
rect = x1, y1, x2, y2
x1and y1是矩形左上角的坐标； X2and y2是右下角的坐标。
圆= xc, yc, radius
xcand yc是圆心的坐标，而半径是圆的半径。以200,50为中心，半径为25的圆具有以下属性： coords =“ 200,50,25”
poly = 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。你可以使用任何图像软件来了解不同位置的坐标。