项目研究 - Zoomable,Scrollable,Hoverable高分辨率图像

时间:2013-02-26 20:09:37

标签: php javascript ajax html5

我在开始一个项目之前做了一些研究,我想知道在开始这个项目之前最好的方法是什么。我将非常感谢您提供的任何帮助,如果有必要,我很乐意提供更多信息。

基本上,我会向用户展示一些极高分辨率的图像。我想创建一个界面,用户可以在其中滚动图像并放大,也可以将鼠标悬停在图片的某些部分上,并接收有关该特定位置的一些信息。另外,如果我能在不使用Flash的情况下做到这一点,我真的非常喜欢它,因为我不喜欢Flash,因为它不能在i-devices上工作。

以下是我正在寻找的zooming capability的示例,以下是我正在寻找的hover capability的示例(抱歉,他们都是圣经手稿,并不意味着在所有人身上都有宗教信仰,这些都是我能找到的最好的例子!)

无论如何,到目前为止,我已经找到this spiffy script进行缩放,但我还没有找到任何悬停的东西(我正在寻找的另一个例子就像你在在Facebook上的图片中标记某人 - 如果你将鼠标悬停在他们的脸上,他们的名字会弹出来。为了让事情变得更加困难,我必须弄清楚如何让它们发挥得更好,所以放大并不会打破悬停能力。

所以我的问题是......有没有人有这样的经历?你对项目有什么建议(开源是首选的),允许这种事情吗?我非常感谢你们给予我的任何帮助!我之后会发布我的调查结果和代码。

1 个答案:

答案 0 :(得分:1)

我认为谷歌地图(和其他此类技术)背后的技术将是最佳选择。使用Google Maps API,您可以使用自己的自定义图块而不是地图图块。然后,您可以在地图上设置边界,以阻止用户导航离开可用图像。最后,您可以使用API​​在“地图”上指定多边形的坐标。这些多边形非常棒,因为您可以使用悬停/点击事件来为您提供所需的功能。

我在这里找到了一篇与你所追求的相似的好文章:http://forevermore.net/articles/photo-zoom/

希望这提供了一些方向和声音,就像你即将开始的一个有趣的项目:)