互动图片答案

【问题标题】：Interactive picture互动图片
【发布时间】：2011-10-06 07:45:01
【问题描述】：

怎么做 - hompeage 是房间图片，但带有交互部分，例如，如果您点击墙上的图片，则会打开画廊，或者如果您点击电视，则会播放一些视频等等...我根本没有使用闪光灯，但也许这是一个选项，我仍然在寻找任何其他方式来做到这一点，我什至不确定这里应该使用什么，有没有办法使用一个图像文件或者一些 Canvas、SVG ......我不知道。有什么建议吗？类型

勒隆

【问题讨论】：

使用、使用 Div、绝对定位、使用
Flash 在这里可能是最好的。它非常适合构建这样的东西。

标签： php css canvas svg

【解决方案1】：

实现这一点的最简单方法是使用图像映射：

http://en.wikipedia.org/wiki/Image_map

文章代码：

<img src="image.png" alt="alternative text" usemap="#mapname" />
<map name="mapname">
    <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" />
</map>

您使用坐标（门、电视）绘制图片区域，然后这些区域变为可点击的。

然后您可以使用 JavaScript 在图像的各个部分上显示图库或视频。

【讨论】：

谢谢，obv。这是一种方法，但是当图像实际上是背景时，我的意思是，它会随着屏幕调整大小，坐标是否保持不变？

【解决方案2】：

使用 HTML 的标记 MAP/Area

http://www.w3.org/wiki/HTML/Elements/area

【讨论】：

【解决方案3】：

也许使用 HTML 地图并通过 Javascript 点击打开图像/视频，让用户能够点击关闭视频、图像等。

这是一个很好的例子：http://www.w3schools.com/tags/tag_map.asp

【讨论】：