热点链接，实用的前端小技巧

今天没有前言，没有目录。我么直接上干货。
首先我们一定遇到过这样的图片

示例

点击图片红线框住部分，就能跳转到某个地方的超链接。我们都知道在img标签外套一个a标签可以实现点击图片跳转的效果。但是往往我只需要图片里的部分能够点击跳转。就比如图中，我们点击马上认证可以跳转，点其他地方则没有反应。

如何实现呢？需要一个远古工具，Dreamweaver。现在已经出到2018版本了。之前的版本我没用过。所以本次举例使用最新版 Dreamweaver 2018 CC

首先打开你的html的文件

点击插入

选择插入下拉栏中的Image
选择好图片后，图片就通过img标签自动引入了

自动引入

然后我们点击右上角的设计

点击设计

我们就可以看到图片的预览，还有下方的工具栏（如果没有工具栏，请点击顶部工具栏中的窗口，里面选择属性）

设计界面

我们注意左下角有四个按钮，分别代表我们热力链接的四个工具，大家可以按照自己的需求使用。我就直接使用最简单的矩形工具

点击矩形工具后，在图片中你先要加入热点链接的地方，拉出一个矩形框住

选定热点链接

随后，看下方工具栏，就可以看到添加链接的地方了

添加链接

完成所有的步骤以后我们回来看代码

回到代码

我们就可以看到代码发生了变化

自动修改代码

分别代表什么我就不一一介绍了 ，大家一看就明白了。这里有几处小细节

1. 大家通过定义常量的方式替代部分路径比如：__ STATIC__这样的方式，在Dreamweaver里是不生效的。解决方法是，先通过插入图片，将热点链接这些都弄好了之后再把图片的路径改为你需要的路径
2. Dreamweaver，默认是不自动保存的，使用phpStrom习惯的朋友，记住要保存哟

好了今天的分享就到这里。内容很简单，主要是分享给对前端的东西不够了解的php后端开发人员，让专业前端见笑了。有什么不对的地方欢迎大神指正。大家共同学习。