热点弹出图片

我们在基础教程添加热点文章中知道热点有5种类型（导览节点、图片、视频、网址、信息），并且介绍了添加导览节点的基本步骤。本篇文章将介绍添加图片热点，点击热点弹出图片。

实现上，主要是制作图片热点皮肤以及图片弹出层。

制作图片热点，我们就不详细叙述了，参照制作热点皮肤。

这一步实际上就是给图片热点做一个皮肤。

接下来就是制作图片的弹出层了。

添加外部图像。

在画布中间位置绘制区域，设置位置以及大小。大小建议60～90%，宽高值一致，定好宽高，计算X、Y的值。我们这里设置的是宽、高分别是75%，X、Y是12.5% 。

另外注意，外部图像是承载热点URL的图片，所以不需要实体，不需要显示。

外部图片，内容缩放至最小，也即是在图片区域内以宽高中的最大值缩放至区域宽高。通俗地说就是，如果图片是横扁的，就是图片的宽撑满区域的宽，如果图片是竖窄的，就是图片的高盛满区域的高。

剩下的就是热点如何唤起外部图片了，即给上面制作完的热点添加上动作（是给Hotspot picture热点添加动作）。

$hu 是热点URL

到这里基本完成，这样我们在添加热点的时候就可以直接使用了。

热点类型选择“图像”，皮肤ID选择我们制作的热点皮肤“Hotspot picture”，在链接目标网址处点击文件夹图标，选择我们要链接的图片。

设置完毕输出预览一下。

我们应该能意识到，到这里并没有完成。

点击热点，打开图片了，还需要关闭。另外，还要考虑，突出弹出的图片。

两个更改，添加矩形作为背景烘托，添加一个关闭按钮。

注意，矩形在树列表里要在外部图像区域的下方，初始不可见，宽高100% ，颜色尽量素色且设置透明度。

关闭按钮，树列表里在矩形上方，外部图像下方。位置锚点右上角，初始不可见，动作点击隐藏外部图像、矩形背景和自身。

其实，根据操作习惯，也可以不需要这个关闭按钮，把关闭的动作给矩形背景也符合操作的习惯。当然，这个根据自己的喜好和设计需求来。

回到热点上，补充两个动作。分别是点击显示矩形和关闭按钮。

输出预览即可。

以上是制作热点弹出图片的所有内容。

有一点小建议，在制作皮肤的时候，一定要养成对元素重命名的习惯（重命名注意英文+数字），否则，单纯依靠软件默认的命名，随着皮肤文件中元素增多，后期容易混乱。

最后注意，有时候，我们会遇到弹出的图片是旋转了90°或180°的，即，在电脑上看图片是正的，放到这里面看图片不正了。遇到这种情况的解决办法是使用图片编辑器，比如PS、美图等，另存一下，或者旋转一下另存。出现这种情况的原因是，这些图片本身就是“不正”的，之所以看到是正的，是使用了一些图片查看器旋转过来的，这种旋转属于“伪旋转”，只是从显示上做了改变，这种改变有很多查看器都能“承认”，但在web端“不承认”，所以我们需要使用编辑器，从根源上旋转过来。