作者： little山林

又名：学会思考

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

——写在前面。

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

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

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

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

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

但是这么做不是一个好的办法，因为图片直接添加在皮肤中，会让皮肤“变大”，毕竟一张图片少则几十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 无法弹出图片？

“这是找人做的，按你说的再改动，那个人提出要加钱，我就自己摸索着改了一下。花了不少时间，不过这个工具不难，现在我觉得自己都掌握的差不多了。要是我年轻点，三两天就学会了，根本都不需要找人做。人果然是要活到老学到老，小林，你看看我都差不多学会了，回头你也学一学，技多不压身嘛”

哦吼，技多是不压身，技多挨压榨。

不过今天不深聊技多是压身还是压榨的问题，我们聊一下“活到老学到老”这个话题。“活到老学到老”乍一听很积极正能量，但是仔细想想，这句话的前提得看学什么。比如上面那段话中的“学到老活到老”就是“地铁老人看手机.jpg”的一句话。

前两天，我之前单位合作中认识的一位小领导找我帮忙做个东西。权责分明我就只做我负责的部分，所需部分素材，一是我不熟，二是我不愿，部分素材我就不负责去搞了。

但是，到我做的时候，给的素材一塌糊涂，我在交流中，表达了意思是：目前的素材离要求差很远，需要调整很多地方，算一下，几近重做的量，不如还是让人重新做吧。无奈这位小领导，不愿花钱再找人重做一遍，于是后续给的素材是他自己在原基础上重新整理的，有了大概样子之后，还是有问题，又花了大量时间整理了第二遍……最终我用着的素材其实依旧是不合格的，不过出于综合考虑，一些能缝缝补补将就用的，我就自己搞定了，没有再让他花时间调整。

故事很单调，这位领导感叹自己又“学会”了一项技能，沉浸在文章开头“活到老学到老”的自我感动中。

说实话我是觉得很尴尬，你一个包工头包揽工程，花钱找临时工人干完了自己理解的一个活，但是自己理解的又有偏差，需要改动。再找工人重做自然是要再付一次钱的，这是天经地义的事情。本来就是自己理解导致的偏差，和人干活的没关系。想省钱，于是自己拿起家伙什，东问西问百度搜索，花了八倍时间，重做不了，只是自己修补了一下，完事之后感叹不过如此，果然要活到老学到老。

他真的学会了一项技能吗？并没有，甚至给行业带来更糟糕的“资本思维”，他谈不上掌握一个设计工具，因为他并没有深入了解和学习，仅仅是为了省点钱到自己手里而先应付过去，稀里糊涂的上手搞了搞。但是糟糕的是，他后来便觉得某某设计工具很简单，就像是一个包工头觉得泥瓦匠也谁都能干。遇到下一个活，又是另一个工具很简单，水电木工也不难。其实真正从头到尾完成一个项目，自己做不了，到找人做的时候，觉得一份不难的活儿，根本不值那么多工钱，真正的“老师傅”不愿找，找个生手或者干脆自己上手。从他的角度看都差不多，没啥区别，反正是用来忽悠不懂得人，得过且过。

这件事其实非常简单，多花点钱直接找个合格设计师，由设计师直接沟通并制作，明明简单的事。非要为了自己多捞点，只是找一个设计软件的操作员，然后自己在旁边瞎理解着指挥做一个最后不能用的素材。

那么作为这个网站运营我又遇到了什么呢，遇到了上面正在“东问西问百度搜索”想自己上手的另一个“包工头”。

我在不少文章说过，我是不太喜欢访问到这个网站看到联系方式就结束这个网站的旅程，而一个差劲的想自己上手的包工头，既喜欢短平快的解决问题，又不愿多花时间，找到联系方式后就开始问题之旅。我为什么不喜欢这样，因为接下来问题交流大概率在浪费时间，因为一点交流的基础没有，只是打听到Pano2VR能做全景漫游，其他的一点都不了解。举个新鲜的例子：昨天有位咨询问题的，确定了很久才明确问题，大概意思就是实现全景漫游和H5结合，Pano2VR虽然也按H5标准输出，但是Pano2VR并不擅长做复杂交互的H5页面。所以我回复了最简单的解决方案可以全景漫游和H5分开，然后在两个项目之间跳转就好了，并且把外部向全景项目跳转的文章分享给他让他参考。然后他干了另一件我比较不喜欢的事，就是得到答案后不去实践而是重复确认，“我按上面的做就可以是吧”，“这个能解决的我的问题吧”。我问他为什么在这问的功夫不先去试一试呢？过了一会，他回复“不好意思，再问一下，H5的动画之后怎么跳转全景了”。说实话，那一瞬间我感觉往前穿越了几分钟。我让他看的就是解决H5往全景漫游跳转的文章，他这不光没点开文章看一眼，更像刚才就没进行过对话一样。确定他是另一个包工头，是因为他接下来是的回复是：“说实话，看不懂”。

到这里我基本上不太想进行下去了。世上无难事，只要肯放弃，或者只要肯花钱，只要肯招人。完全没必要给自己和别人找麻烦。

活到老学到老，在一定意义上是没问题的，我们要在自己的专业领域，自己的职业领域，自己的擅长领域，去不断学习，变得更强。在快速发展的社会，学习和接纳新事物，不被落后。但是，举个例子，我不觉的一位年近半百完全没有基础的想学Java以后打算转行的，值得用“活到老学到老”鼓励，如果有人鼓励，那一定是搞Java培训班卖课的。

对自己有个清醒认识，搞了几年IOS开发的，学习一下去搞Android开发，叫活到老学到老，搞了几年网页开发的，学习一下去做小程序，也是活到老学到老。但只是报了个欧洲跟团十日游，就要去考雅思，这没必要，更没必要的是，觉得十天后回来顺便就能去英语培训班当老师了。

生活是不容易，想多挣点钱是没问题。但是要找准方向，找一个自己擅长且不抵触的领域去深耕，去活到老学到老，而不是东一榔头西一棒槌。什么都想学一点，什么又都学不到精通，最后什么都没有竞争力。

一个想省点钱的包工头，做不到静下心来学习，就想赶紧把钱挣了。那就干脆不要学，做自己能做的。真正厉害的包工头不需要掌握泥瓦木工水电，一样能干好项目。只有没有格局的包工头，没有搞清自己的定位，为了省不该省的，自己上手裱糊，项目最终干的不咋地，也耽误了自己能做好的本职工作。

以上提到的可以当成虚构的，别当真。没有格局的包工头其实也不会饿着，总归还有自己能做得了的活，但却是永远只能是走一步干一步做包工头。最后，说一个我听过感触比较深的话，“扶了你快十年，还没扶上马”，仔细想想，这对想当将军和军师的人都是一种悲哀。

“路径”在计算机领域指的是用户在磁盘上寻找文件时，所历经的文件夹线路。例如：C:\Program Files\Pano2VR6 就是路径。

计算机中路径分为绝对路径和相对路径。

绝对路径：从根文件夹开始的路径。
相对路径：从当前文件夹开始的路径。

这和我们使用Pano2VR有什么关系吗？当然有关系，因为只要是和计算机里的文件打交道，就必须清楚这两种路径的概念和区别。很多人经常问为什么打不开或者打开报错的问题，这些问题中大多都是路径问题造成的。

举个例子：制作好的全景，热点弹出图片在自己电脑上正常，在别人电脑/在服务器上弹不出来，检查发现图片路径是 C:\Users\zhangsan\Desktop\××全景\平面图\海报最终稿3（2）.jpg

上面举例的问题，先不考虑路径中的中文，单就路径本身问题，对于缺少一些基础的就够解释半天的。这个问题没什么好解释的，且经验告诉我，解释半天不如直接说解决方法：把文件放到输出的output文件夹下面，或者归总到一个文件夹，再把这个归总的文件夹放到output文件夹下面，路径就从文件夹或文件开始。比如热点要弹出的图片归总到一个img文件夹里面并放到输出的output文件下，那么热点弹出的图片路径变成img/图片名.jpg 。注意，为了避免不必要的麻烦所有的文件夹和文件命明都是用英文。

都是热点弹出一张图片，而 C:\Users\zhangsan\Desktop\××全景\平面图\海报最终稿3（2）.jpg 是图片的绝对路径，img/图片名.jpg 是图片的相对路径，只要是涉及路径的最终项目要移动（出本地计算机），那么就应该选择相对路径。

另外还需要注意：在使用字母命名路径时候，注意字母的大小写。如果文件夹或文件命名混合了大小写字母，那么路径一定要严格按命名来。什么意思呢，举个例子：Pic文件夹下有个Start.jpg，路径要写成Pic/Start.jpg，别写成pic/start.jpg 。这么做是为了避免一些对大小写敏感的服务器软件比如Tomcat，大小写敏感意思就是Pic和pic不是一个路径。当然不是所有服务器软件都大小写敏感，但是要注意这种情况，不然会很麻烦。

下面补充一些相关的小知识。

URL，全程Uniform Resource Locator，缩写URL，中文译作：统一资源定位系统。URL是因特网的万维网服务程序上用于指定信息位置的表示方法，大白话就是网络上的地址，也就是网址。