如何给图片增加热点

其实这个问题是个基础性的问题 只是自己一直不是很熟悉 刚才做了个例子

现在将过程记录下 以备忘记

1. 增加一个图片Html标记

   <img src="photo/c.jpg" alt="" border="0 " usemap="#Map1" style="height: 172px; width: 319px" />

2. 增加热点设置

    <map id="Map1" name="Map1">
            <area shape="rect " onclick="alert('111');return false;" coords="10,10,30,30 " href="#"
                alt="说明1" />
            <area shape="rect" onclick="alert('222');return false;" coords="40,40,60,60 " href="#"
                alt="说明2" />
            <area shape="rect" onclick="alert('333');return false;" coords="70,70,80,80 " href="#"
                alt="说明3" />
        </map>

     说明:热点有多种类型 有矩形 圆形等 我只是做了个矩形的例子(这个会经常用到)

问: 图片是如何和热点联系到一起的?

答: 通过图片的usemap属性

问: coords的数字是相等什么地方的?

答: 是相等于图片的左上角的

自问自答 呵呵