jquery - 我应该使用什么 "platform"来开发在线交互式图像 map ?

标签 jquery html css flash

<分区>

我正在尝试创建一个简单的交互式图像 map ,用户可以将鼠标指针悬停在图像的一部分上,然后设置会依次动画/显示/取消隐藏弹出框(不是新的window!) 在鼠标指针的当前位置旁边,包含文本、图像、&|可点击的链接。

不过,示例中并不是图片贴图,而是9张小图片。将鼠标悬停在每个图像上时会变大一点,单击时会将图像加载到右侧 <div>页面的。

我希望满足这些条件:

  • 我想使用图像映射(HTML 或其他)而不是 9 个小图像
  • 我希望悬停操作也能加载图像 - 无需点击图像
  • 我希望所有流行的查看者(桌面浏览器、移动浏览器、iPad、Android 平板电脑等)都可以查看该页面并进行交互...

我不确定要使用什么平台(又名 - 开发工具的组合)来满足上述标准列表。主要目标是满足上述标准列表中的最后一项。如果为了满足最后一项需要这样做,我可能会牺牲上面列表中的第一个或第二个标准。

我想到使用的两个“平台”是:

  • HTML + CSS
  • jQuery + CSS
  • Flash + ActionScript
  • Javascript + AJAX

我应该使用哪些工具来实现这一目标?

是否有其他工具或工具集是我遗漏的并且应该使用而不是上面列出的工具?

提前致谢!


编辑: 如果您投票关闭此问题,请将我重定向到已经涵盖此问题的问题,否则请不要关闭它!这个问题是可以回答的 - 这不是讨论。

最佳答案

这在直接 HTML/CSS(不需要 JS)中实现起来非常简单,这将是最广泛使用的方法。这是一个简单的例子:

您可以根据需要使弹出内容变得复杂 - 这是一个相当基本的示例,但您可以在列表项中使用任意 HTML。此外,您可以为过渡添加一些 CSS3 动画,这在您喜欢的现代浏览器上看起来会很好看。

关于jquery - 我应该使用什么 "platform"来开发在线交互式图像 map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8169587/

相关文章:

javascript - 图像相互叠加的动画

html - IE 9 不支持 $locationProvider.html5Mode

html - 带有描述的 CSS Card ionic left div

php - 提交按钮以创建带有输入文本的 HTML 文件

jquery - 响应式网页在移动设备上太小

javascript - 具有无限列的 Bootstrap 行(动态数据) - 需要在 3 后创建新行

javascript - 类型错误 : callback is not a function -

javascript - 如何通过右键单击更改行的背景颜色

html - 图片不能用 CSS 缩放

jquery - Bootstrap col-md-12、col-sm-12 不适用于 bootstraps selectpicker