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

Question

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

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

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

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

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

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

问题:

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

Answer 1

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

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

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