javascript - 管理图像 map ,管理与区域 map 的交互

标签 javascript jquery css wordpress dictionary

我目前正在为客户开发一个房地产网站。客户坚持要创建这样的东西:

http://woodfield-sillery.com/plans/

基本上,我正在寻找一种方法来重新创建相同的东西,从技术上讲,它需要:

  • 管理图像映射行为(以便能够对鼠标悬停使用react)
  • 管理 onclick 以打开所选楼层的 View
  • 选择后,第二张 map 将显示该楼层以及可用的公寓
  • 然后再次点击,就会显示价格、库存情况等。

我在通过 CSS 管理翻转图像映射时遇到问题。

除此之外,当然,客户希望自己管理一切(这样他就可以更新公寓状态),而我计划通过 Wordpress 托管该网站

问题:

  • 有人研究过这样的解决方案并愿意分享经验吗?
  • 有人遇到过可以实现此目的的 WordPress 解决方案吗?
  • 有人有这方面的技术解决方案吗(Javascript、HTML5、CSS 组合?)

最佳答案

我是 MapSVG WordPress/jQuery 插件的作者,它能够满足您的需求:http://mapsvg.com

首先,您需要在任何矢量编辑器(InkScape、Adobe Illustator 等)中创建一个空白图像。然后将建筑物图像(png/jpeg)嵌入到背景中。然后在图像顶部添加形状并为它们提供透明颜色填充 (=rgba(0,0,0,0))。将图像保存为 SVG,并将其上传到 MapSVG map 生成器。

其他一切都将在 MapSVG Builder 中完成 - 颜色、工具提示、弹出窗口、链接、事件处理程序等。请参阅演示。

关于javascript - 管理图像 map ,管理与区域 map 的交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35230434/

相关文章:

javascript - 使用 javascript 更新表单值

javascript - 控制 bootstrap 确认模式中的确认按钮

javascript - 在数据表的渲染列中使用 ng-click

javascript - 带有更新面板的 div 之间的转换

css - 媒体查询不适用于手机

javascript - jstree 检测多个项目被移动

javascript - 如何使用 angular.element 获取 li 元素

Javascript OnPaste

html - 如何将 css max-left 或 min-left 位置放置到绝对对象?

javascript - 图像随屏幕高度自动调整大小,无滚动条 - CSS