3.3 图像的超链接
<A>标记不仅可以为文字设置超链接，还可以为图片设置超链接。为图片设置超链接有两种方式：一种是为整个图片设置链接，只要单击该图片，就可以跳转到链接的URL上；另一种是为图片设置热点区域，将图片划分多个区域，单击图片不同的位置将会跳转到不同的链接对象。
3.3.1 将整个图像设为链接
将整个图像设为链接的方法很简单，只需要将<A>标记中的文字换成<IMG>元素，在<IMG>元素中添加需要设置为超链接的图片即可，其语法格式如下。
<A HREF="链接地址"><IMG SRC="源文件地址"></A>
【示例3-6】将图像设置为链接。
01 <HTML> 02 <HEAD> 03 <TITLE>图片链接</TITLE> 04 </HEAD> 05 <BODY> 06 <A HREF="http://www.google.com" TITLE="谷歌"> 07 <IMG SRC="google.gif"> 08 </A><BR> 09 <A HREF="http://www.baidu.com" TITLE=" 百度" TARGET="_blank"> 10 <IMG SRC="baidu.gif" BORDER="0"> 11 </A><BR> 12 <A HREF="http://www.ibucm.com" TITLE=" 北京中医药大学远程教育学院" TARGET= "_blank"> 13 <IMG SRC="ibucm.gif" BORDER="0"><BR> 14 北京中医药大学远程教育学院 15 </A><BR> 16 </BODY> 17 </HTML>
示例3-6运行效果如图3.7所示。由图3.7可以看出，第7行为图片增加超链接之后，会自动在图片上增加一个边框；如果要去掉该图片上的边框，可以在<IMG>元素上设置BORDER的属性值为0（第10行），如第二个超链接的百度图片；也可以将图片与文字一起设为超链接（第13行），如图3.7中的最后一个超链接。
图3.7 将图像设为超链接运行效果
3.3.2 设置图像热点区域
除了可以为整个图像设置链接外，还可以为图像设置热点区域，也就是将一个图片划分成多个可单击的区域，单击不同的区域将跳到不同的链接上。在定义图像热点区域时，除了要定义图像热点区域名称之外，还要设置其热区范围。可以使用IMG元素中的USEMAP属性和<MAP>标签来创建，其语法格式如下。
<IMG SRC="URL" USEMAP="#MAP名"> <MAP NAME="MAP 名"> <AREA SHAP="" 图像热区形状" COORDS="热区坐标" HREF=" 链接地址"> </MAP>
其中USEMAP属性值的“MAP名”必须是<MAP>标签中的NAME属性值，因为可以为不同的图片创建点击区域，每个图片都会对应一个<MAP>标签，不同的图片以USEMAP的属性值来区别不同的<MAP>标签。需要注意的是，USEMAP属性值中的“MAP名”前面必须加上#。
<MAP>标签中至少包含一个<AREA>元素，如果一个图片上有多个可点击区域，将会有多个<AREA>元素。在<AREA>元素中，必须指定COORDS属性，该属性值是一组用逗号隔开的数字，通过这些数字可以决定可点击区域的位置，但是COORDS属性值的具体含义取决于SHAPE的属性值，SHAPE属性用于指定可点击区域的形状，其值可以为以下几种。
• CIRCLE：指定可点击区域为圆形，此时COORDS的值应该是类似x,y,z的表示方法。其中x和y代表圆心的坐标，该坐标是相对图片的左上角而言的，也就是说，图片左上角的坐标是0,0，而z代表圆的半径，单位为像素。CIRCLE也可以简写为CIRC。
• POLYGON：指定可点击区域为多边形，此时COORDS的值应该是类似x1,y1,x2,y2,x3,y3…的表示方法。其中x1和y1是多边形的一个顶点的坐标，x2和y2是多边形的另一个顶点的坐标，至少3个顶点才能形成一个区域（三角形区域）。同样这些坐标也是相对图片左上角而言的。因为在HTML中，多边形会自动闭合，所以在COORDS中，不用重复第一个坐标来闭合整个区域。POLYGON也可以简写成POLY。
• RECTANGLE：指定可点击区域为矩形，此时COORDS的值应该是类似x1,y1,x2,y2的表示方法。其中x1和y2是矩形的一个角的顶点坐标，x2和y2是该角的对角的顶点坐标。同样这些坐标也是相对图片左上角而言的。RECTANGLE也可以简写成RECT。