这样我们就可以以图片的形式展开对于热区链接的叙述了。
一般我们使用热区链接就三大块1、要先定义要使用图片的名字如
2、导入要使用的图片
3、定义要使用图片应产生链接的位置
下面这两幅图是大概地向大家展示一下效果。注意看图中的注释。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<map name="lin"><!--这是先定义要使用图片的名字-->
<img src="8.jpg" usemap="#lin" alt="" /><!--这是导入要使用的图片-->
<area shape="circle" coords="0,0,60" href="http://www.baidu.com" alt="" target="lin" ><!--这是定义要使用图片应产生链接的位置-->
</map>
</body>
</html>
显然可以看见网页里会有个蓝色的1/4圆产生，这是由于定义了热区链接，当点击那个圈时会直接在新页面打开链接的网址。
接下来具体介绍 要使用图片应产生链接的位置
也就是这一段代码
<area shape="circle" coords="0,0,60" href="http://www.baidu.com" alt="" target="lin" >shape表示定义热区图案形状，有三种 圆形：circle多变形：polygon矩形：rectagle
href后面跟了点击热区将会打开的新网页，所以可以随意设置地址
coords代表了定义点的坐标，由于对于不同形状会有不同区分，分三种
圆形时:(x,y,z)
多边形:（x1，y1,x2,y2,x3,y3.............）
矩形：（x1,y1,x2,y2)
以下我把三种不同形状的时候都写一下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<map name="lin">
<img src="8.jpg" usemap="#lin" alt="" />
<area shape="polygon" coords="20,20,100,100" href="http://www.baidu.com" alt="" target="lin" />
</map>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<map name="lin">
<img src="8.jpg" usemap="#lin" alt="" />
<area shape="rectangle" coords="503,45,577,45,616,84,616,184,503,184" href="http://www.baidu.com" alt="" target="lin" />
</map>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<map name="lin">
<img src="8.jpg" usemap="#lin" alt="" />
<area shape="circle" coords="90,90,90" href="http://www.baidu.com" alt="" target="lin" />
</map>
</body>
</html>
下面有一种好玩的方式，新的页面将会在原页面的一个框架里打开
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<map name="lin">
<img src="8.jpg" usemap="#lin" alt="" />
<area shape="circle" coords="90,90,90" href="http://www.baidu.com" alt="" target="lin" />
<iframe name="lin" src="http://www.csdn.com" width="600" height="400" frameboard="1" ></iframe>
</map>
</body>
</html>
有关iframe可以看我的另外一篇博客《邮件链接》
原文：http://blog.csdn.net/qq_24928451/article/details/44656739
