srcmini上一章HTML教程请查看：html文本链接
我们已经看到了如何使用文本创建超文本链接，我们还学习了如何在我们的网页中使用图像。现在，我们将学习如何使用图像来创建超链接。
例子
使用图像作为超链接很简单，我们只需要在超链接中使用如下所示的图像代替文本
<!DOCTYPE html>
<html>
<head>
<title>图片超链接</title>
</head>
<body>
<p>点击下面链接</p>
<a href = "https://www.srcmini02.com" target = "_self">
<img src = "/images/logo.png" alt = "srcmini" border = "0"/>
</a>
</body>
</html>
这是使用图像创建超链接的最简单方法，接下来，我们将看到如何创建鼠标敏感的图像链接。
Mouse-Sensitive图片
HTML和XHTML标准提供了一个特性，允许在一个图像中嵌入许多不同的链接。你可以根据图像上可用的不同坐标在单个图像上创建不同的链接。一旦不同的链接被附加到不同的坐标，我们可以点击图像的不同部分来打开目标文档，这种对鼠标敏感的图像称为图像映射。
创建图像映射有两种方法
- 服务器端图像映射——这是由<img>标记的ismap属性启用的，需要访问服务器和相关的图像映射处理应用程序。
- 客户端图像映射——这是使用<img>标记的usemap属性以及相应的<map>和<area>标记创建的。
服务器端图像映射
这里你只要把你的图像在一个超链接和使用ismap属性使它特殊的形象,当用户单击某个地方的形象,浏览器通过鼠标指针的坐标以及<一>标记中指定的URL到web服务器，服务器使用鼠标指针坐标来确定将哪个文档传递回浏览器。
当使用ismap时，包含<a>标记的href属性必须包含服务器应用程序(如cgi或PHP脚本等)的URL，以便根据传递的坐标处理传入的请求。
鼠标位置的坐标是从图像左上角(0,0)开始计算的屏幕像素，前面带问号的坐标被添加到URL的末尾。
例如，如果用户从下图左上角向下点击20像素，然后从上往下点击30像素。
下面的代码片段生成了什么：
<!DOCTYPE html>
<html>
<head>
<title>ISMAP超链接的例子</title>
</head>
<body>
<p>点击以下链接</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "srcmini" border = "0"/>
</a>
</body>
</html>
然后浏览器将以下搜索参数发送到web服务器，这些服务器可以由ismap.cgi脚本或map文件处理，你可以将你喜欢的任何文档链接到这些坐标：
/cgi-bin/ismap.cgi?20,30通过这种方式，你可以为图像的不同坐标分配不同的链接，当这些坐标被单击时，你可以打开相应的链接文档。
注意——当你学习Perl编程时，你将学习CGI编程。你也可以使用PHP或其他任何脚本编写脚本来处理这些传递的坐标。现在，让我们集中学习HTML，稍后你可以重新访问这一节。
客户端图像映射
客户端图像映射由<img />标记的usemap属性启用，并由特殊的<map>和<area>扩展标记定义。
使用<img />标记将形成映射的图像作为普通图像插入到页面中，只是它带有一个称为usemap的额外属性。usemap属性的值将在<map>标记中用于链接映射和图像标记。<map>和<area>标记定义了所有的图像坐标和相应的链接。
map标签内的<area>标签，指定了形状和坐标来定义图像上每个可点击热点的边界。这是一个来自图像映射的例子
<!DOCTYPE html>
<html>
<head>
<title>USEMAP超链接的例子</title>
</head>
<body>
<p>搜索并点击</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
x1和y1是矩形左上角的坐标;x2和y2是右下角的坐标。
- circle= xc, yc，radius
xc和yc是圆心的坐标，半径是圆的半径。以200,50为圆心，半径为25的圆的属性coords = “200,50,25”
- poly= x1, y1, x2, y2, x3, y3，…xn, yn
不同的x-y对定义多边形的顶点(点)，从一个点到下一个点画一条“线”。一个顶部点为20、20和40像素、最宽点为40的菱形多边形的属性coords =“20、20、40、40、20、60、0、40”。
所有坐标都相对于图像的左上角(0,0)，每个形状都有一个相关的URL，你可以使用任何图像软件来知道不同位置的坐标。
评论前必须登录！
注册