HTML直接添加超链接和热点的区别

超链接：包括锚点链接、热点链接、文本链接，如果能够链接的元素都可以用于超链接。

图像热区的链接：这种前提条件是要有图像才行，然后在DW下方有一个热区的链接，它可以不同角度、不同形状进行链接，这样可以把一张图里做一个位置的链接，方便导航。不过这个有个缺点就是代码复杂化，一般而言，编程人员不喜欢用这种方式，包括我在内，因为这个产生的代码内容太乱，而且对页面兼容性也不好，所以这只能说适用于初学者，我们做页面往往会使用在DIV上加链接，这样可以减少不必要的麻烦。

个人还是比较喜欢第一种方法，怎么讲呢，每个人的习惯不一样，我也无权说另一种方法不好。

第二种方法切成一个较大区域的话自然图片也就大，相对来说影响加载速度。

1、下载名叫 Dreamweave 的软件（网上很多 自行百度）

2、创建 HTML 文档

3、将图片插入 html 代码中

4、点击 左上角的“设计”按钮

5、这时候会看到图片预览图 ， 然后鼠标点击图片（选中状态会出现黑色边框） 然后 按 “ctrl+F3” 调出属性面板（注：此时属性栏链接地址为整张图片链接地址，图片上面加链接看第六步骤）

6、制作热点链接 左下角选择对应热点形状，绘制热点，用最左边的箭头可以选中热点拖拽位置，属性面板会出现当前选中热点的属性，链接地址，打开方式等

7、点击菜单栏 文件---保存，然后点击“设计”按钮左边的“代码”按钮 看到的body标签内部的就是热点的代码，整个复制到你的自定义模块中就可，

8、注意：一个页面中出现多个画有热点的图片时，那么上面图片中标红位置所示，每张图片会对应生成一个usemap="#map" 对应热点的代码块中也会生成 name="map" id="map" map就是这个图片识别这个代码块的名字，像你回家找门牌号一样 map 对应起来了 就走对了；

这个时候有一种情况 需要注意 1、map（门牌号，名字）出现多次 像你第一次去别人家 别人跟你说他家门牌号 是402 结果到了之后你发现这楼上好几个 402 ,你肯定找不到正确的位置，代码也是一样 会出现点击不了的情况， 所以这地方要注意 一个页面里面 相同的 usemap="#map" 及对应的 name="map" id="map" 不能出现多次，每个 id 只能出现一次 出现一样的时候只需要把名字改掉即可 如： usemap="#map1" name="map1" id="map1" 也可以叫 usemap="#aaa" name="aaa" id="aaa" 主要是图片要和代码块对应起来

需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。

参考代码如下：

<map name="Map" id="Map">

  <area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" />

  <area shape="rect" coords="89,175,394,264" href="#" />

  <area shape="rect" coords="95,293,386,355" href="#" />

</map>

网页热点使用方法：

个人推荐Dreamwever可视化 *** 作来创建网页热点。

1、打开Dreamwever，新建一个页面，插入一张图片，

2、使用左下角的热点工具。

3、点击“矩形”或其他热点工具，再在图片上拖动位置

4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。

---