分享到：微信新浪微博QQ好友QQ空间腾讯微博复制网址

在制作网页时，特殊的需求经常层出不穷，比如，在一张很大的图片上将几个不同区域分别链接到不同的网址。 

这个需求的制作方法也有很多种，这篇文章我将详细讲解一下在图片上不同区域加不同链接的方法之一—图片“热点法 ”。 

一、准备一张图片。 

二、打开Dreamweaver，新建一个网页，将图片插入到页面中，具体方法我就不多说了，不会的同学猛击这里学习新建网页和插入图片的基础知识。 

三、鼠标左键点中图片，这时候软件下方的属性面板就会变成和图片相关的属性，注意看左下角部分，如图一中的红色框内所示。 

四、注意方块、圆形、多边形三个小图标，它们就是我们要用的“图片热点”工具，先点击方块按钮，将鼠标移动到图片上，这时候鼠标就变成了十字，在你想加链接的地方画一个方块。 

五、方块画好后，下面的属性面板就会变成该方块区域的属性，如图二，按照属性面板上的选项填上相应的内容就可以了，“链接”就是点击此处跳转的链接地址；“目标”就是点击此处时窗口的打开方式；“替换”就是鼠标悬浮在该区域时提示的文字。 

六、依照上面的方法，选中图片，点击圆形按钮，在图片上新建一个圆形热点。完成后可再使用多边形按钮新建一个多边形热点。热点最终效果如图三所示。制作完毕，点击图片上的热点区域可以随意挪动，也可以修改任意的属性。 

七、大功告成，现在就预览一下吧，鼠标点击到热点区域上时，会弹出新窗口，而且在图片上还会出现你所制作的热点形状，如下图

如何在一张图片上添加多个不同的链接-热点篇[点击放大]

  八、热点添加完毕后，查看页面源代码，你会发现在代码最底下多出几行内容，这些就是热点生成的：

<map name=”Map” id=”Map”>
<area shape=”rect” coords=”67,8,213,38″ href=”http://www.4u4v.cn” target=”_blank” alt=”dreamweaver” />
<area shape=”circle” coords=”273,70,33″ href=”http://www.4u4v.cn” target=”_blank” alt=”dreamweaver” />
<area shape=”poly” coords=”352,71,384,34,417,69,387,99″ href=”http://www.4u4v.cn” target=”_blank” alt=”dreamweaver” />
</map>

就是这么简单，图片热点方法制作完毕。