热点地图的实现方法（使用Dreamweaver）

　　很久没有使用过Dreamweaver了，虽然前端届都鄙视用Dreamweaver，但是制作热区地图来说，这个工具确实很是方便。

　　下边就是使用Dreamweaver制作的一张中国地图的热点。

　　打开Dreamweaver后导入一张图片，设定成好height和width后在设计视图下单击图像，在下边的工具栏中就会有进行热点地图描点的选项。

      

　　红色框中的三个图像分别对应着制作长方形热点地图，圆形热点地图，和多边形热点地图。接下来选取多边形热点地图。

　　选取后就可以对图像进行描点绘制热点地图了。接下来看看代码部分。

 <img src="#" alt="map" usemap="#Map" />
 <map id="Map" name="Map">
    <area shape="poly" coords="357,451,366,479,367,504,346,510,310,490,226,498,157,492,132,482,123,499,98,492,70,443,45,361,63,334,134,328,187,298,　　　　205,238,231,240,266,210,311,204,343,169,379,195,399,231,419,279,448,295,476,308,485,337,485,351,484,369,452,378,442,399,420,404,411,429" 
　　　　href="#" alt="新疆" />
　　 <area shape="poly" coords="366,456,381,484,377,505,418,445,458,447,500,467,520,461,567,479,604,500,617,539,604,567,579,581,579,618,534,609,492　　　　,589,498,608,492,633,448,620,378,595,345,566" href="#" alt="青海" />
</map>
<script type="text/javascript">// <![CDATA[
var <var>a</var>=document.getElementsByTagName("area");
        for(i=0;i<=33;i++){
            a[i].onmouseover=function(){
                this.title=this.alt;
            }
        }
// ]]></script>
</code></pre>

 

<img>标签中的usemap的值即为<map>的ID值。<area>作为<map>的子元素出现，为地图指定区域。在<area>中sharp的属性值是制定area的形状，"poly"或是"polygon"表示是选取多边形。与其对应的是coords属性，它指定的是一个个的相对于图像左上角的像素点的位置，根据一个个的点去顶区域。"x1,y1,x2,y2,x3,y3....."

当sharp的属性值为"rect"时表示的是长方形，coords="x1,y1,x2,y2"，指定的这两个点是长方形的两个对角点。

当sharp的属性值为"circle"是表示的是圆形，coords="x,y,r",(x,y)表示的是圆心的坐标，r表示的是半径的值。

下边的Javascript内容是检测热区地图是否实现的。

 下载源代码