按钮弹出图片/视频

又名：学会思考

我希望看到这篇文章的越少越好。如果你也是已经看过热点弹出图片/视频的文章并会制作实现了，却苦思不知道怎么实现按钮弹出图片/视频，那么我建议先不往下看，去把热点弹出图片的文章再看一遍，停下来思考一下。

——写在前面。

如果还是不知道怎么做，甚至不知道思考什么，那就继续往下看吧。

标题虽然是弹出图片/视频，但文章只聊弹出图片，不赘述弹出视频。没有配图，也不会像前面的文章那样将完整是制作过程叙述出来。

看这篇文章的前提是已经看完热点弹出图片，或者把基础教程看完了。不然那就真的先不要继续往下看了。

如果你有了一定的基础，那么应该知道在皮肤中怎么控制一个元素的显示和隐藏，这个没什么好说的。

添加一个按钮，甚至不一定非得按钮，图片、文本、矩形等任何元素都可以，给元素添加动作，让其被点击的时候，显示/隐藏其它某一个元素。这里的元素如果是一张图片，那么最简单的按钮弹出图片就完成了。

但是这么做不是一个好的办法，因为图片直接添加在皮肤中，会让皮肤“变大”，毕竟一张图片少则几十Kb，大的几Mb，放在皮肤中，皮肤变大，初始加载就变慢，让整个全景项目加载也跟着变慢。所以，皮肤编辑中给了“外部图片”元素，也就是Draw external image，你可以理解它是一个图片的承载容器，给它图片地址(URL)，它就可以把图片加载并显示出来。这是它的一个优点，哪怕有几百上千张图片要显示，也不需要把那些图片放进皮肤中。只需要添加一个“外部图片”这个承载容器，设置图片的地址给它就可以。此外它有另一个优点，默认读取方式是 Unload content on hide ，译为隐藏时不读取加载内容。这就会大大减少初始加载的时间。“外部图片”自身属性就有个外部URL，填上图片的URL就可以显示图片，URL可以是存在服务器的图片网址，也可以是本地图片文件的相对路径。填URL只是一种方式，直接动作设定值给外部图片也可以显示图片，设定的值是就是图片的URL。（关于URL，去看 绝对路径和相对路径 的文章）

所以，我们做弹出图片，实际上弹出的是“外部图片”元素，通过“外部图片”加载图片显示。（做热点弹出图片，必须是使用这种方式，这里需要好好想想。如果不是弹出外部图片而是直接弹出图片，一个热点模板就只能固定弹出一张图片，假设几十上百个热点，那就做几十上百个热点模板。）

这时候回过头来看，热点弹出图片，是点击热点模板，显示“外部图片”元素，并给外部图片元素设定了值，值是图片URL。当然文章中设定的值是 $hu（ $hu 是版本5热点URL的占位符，注意版本6占位符有变化），占位符就是抓取对应位置的数据，也就是说 $hu 就是热点URL处填写的图片URL。皮肤动作把 $hu 设定给外部图片，实际上是把热点URL处的图片URL赋给外部图片。热点弹出图片，设定值使用的占位符，巧也就巧在用占位符，一个热点模板，用在哪个实体热点上，就拥有哪个实体热点的参数。

你如果没有做出来按钮弹出图片，至少有以下几个问题。

不认真。不知道 $hu 是什么，其最终实质是什么？文章说明了$hu，也有专门文章讲占位符。

不主动。不会自己尝试一下 $hu 是否能直接换成图片的URL？哪怕不通过给外部图片设定值的方式，而是直接设置外部图片的外部URL参数，让其固定就显示一张图片，这样就变成一个简单的问题，按钮仅仅显示外部图片。

所以，按钮弹出图片实现思路是：添加一个按钮，给他动作，显示外部图片元素，并设定值给外部图片，值直接就是图片地址。或者按钮的动作仅仅只要显示外部图片元素，外部图片元素的外部URL填上图片地址。再或者不考虑加载速度问题，就是按钮添加显示动作，显示已经添加到皮肤中的图片。

这篇文章本来觉得不可思议，在想有没有必要发布的时候，一位伙计咨询问题，他截取了HTML网页设置（开启重力感应/陀螺仪）文章中第三张配图，就是哪个勾选 Include gyroscope control 的配图，问我，为什么他的软件和文章中的不一样？并给出了他软件的截图。这个问题如果是版本6刚发布，也就罢了，最多就是没认真从头看文章，网站基础第二篇文章开头就作了说明，教程是以版本5.2为基础。版本6发布了，文章在重要地方也做了更新，第二篇文章也加上了涉及版本6的会加上补充说明，第二篇还是没看到也无所谓。问题是，HTML网页设置（开启重力感应/陀螺仪）文章已经早就更新了版本6的内容，问问题前就这么爱惜鼠标滚轮不愿多划动一下？

所以，我想了一下，这篇文章非常有必要，没有不可思议。我可以大胆猜测一下，我觉得仍旧会有伙计在看这篇文章的时候问 $hu 是什么意思？为什么填 $hu 无法弹出图片？