HTML图片热区怎么做的？

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

shape="circle" coords="x,y,r" 区域为圆形 后面是圆心坐标和以像素为单位的半径

shape="rect" coords="x1,y1,x2,y2" 区域为矩形 矩形的左上右下两点的坐标

shape="poly" coords="x1,y1,x2,y2,x3,y3..." 区域为多边形 多边形所有顶点的坐标

以上所有坐标都是相对于图形img左上脚坐标而言的

<img>中的 usemap 属性可引用 <map>中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map>添加 id 和 name 属性。

其中如果area划分的区域部分交叉则前面的area覆盖后面的area.即第一个area覆盖第二个area。

一、在Dreamweaver

MX中为图片建立热区

1、启动Dreamweaver

MX（其他版本请仿照 *** 作），打开需要建立图片热区的网页文件，选中相应的图片，此时“属性”面板自动切换到“图片属性”状态（如图1）。

2、选中一种热区类型（如“椭圆”），然后在图片上拖来出一个热区来（参见图1）

注意：热区相当于是在图片上增加了一个图形层，象调整图片一样，可以通过鼠标调整热区的大小和位置。

3、在“链接”右边的方框中输入要链接的网址（如“

http://www.yesky.com

”）；在“替代”后面的方框中输入一些说明字符（如“天极网”）；按“目标”右边的下拉按钮，在随后出现的下拉列表中选择一种链接页面的打开方式（如需要让链接的页面在新窗口中打开，就选择“_blank”选项）。

注意：“替代”方框中输入的字符，在以后浏览网页时，当鼠标指向该热区时，在页面上会显示出该字符（如图2）。

4、重复上述2、3步的 *** 作，在图片的不同部位建立多个热区。

在FrontPage2003中为图片建立热区

1、启动FrontPage2003，打开需要建立图片热区的网页文件。

2、执行“视图→工具栏→图片”命令，展开“图片”工具栏

3、选中一种热区类型（如“长方形”），然后在图片上拖来出一个热区，此时系统自动d出“插入超链接”对话框

4、在“地址”栏上输入要链接的网址点击“屏幕提示”按钮打开“设置屏幕超链接提示”对话框，输入一些说明字符

注意：此处的“屏幕提示”同Dreamweaver

MX“替代”功能一样。

4、同理，重复上述3、4步的 *** 作，可以在图片的不同部位建立多个热区。

---