图像热点区域链接
图像热点区域链接
即 将某一图像划分为n个不同的热点区域，鼠标点击不同区域时链接 到不同的内容。
常见应用：景区景点分布图，点图中不同顶点分别显示其景点详细介绍。
HTML实现的大体结构：
- <img src="图片地址" usemap="#标记名称" />//教材上和网上好多地方说是username，这是有问题的。
- <map name="标记名称">
- <area shape="热区形状" coords="热区坐标" href="链接地址" />
- <area shape="热区形状" coords="热区坐标" href="链接地址" />
- <area shape="热区形状" coords="热区坐标" href="链接地址" />
- </map>
shape的取值：<area shape="default|rect|circle|poly">
default:规定全部区域,无意义...
rect：定义矩形区域
coords="x1,y1,x2,y2" （x1,y1）为左上角坐标，(x2,y2)为右下角坐标。
circle(circ):定义圆形
coords="x1,y1,r" （x1,y1）为圆心，r为半径。
poly(polygon):定义多边形区域
coords值分别为多边形各个顶点坐标
那么，如何去得到点的精确坐标呢。
虽然Dreamwever提供有特别方便的这类功能，但是我还是不喜欢去用它。
HTML提供了一个叫ismap的属性
ismap 属性是一个布尔属性。
ismap 属性将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像）。
当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。
注意：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>确定热点区域坐标</title>
</head>
<body>
<a href="#"><img src="file:///E:/Pictures/13.jpg" width=400px height=400px ismap="ismap"></a>
</body>
</html>
