带有照片网站的交互式平面图[关闭]

Question

我正在尝试创建一个页面，在该页面上可以看到公寓的平面图，并且将鼠标悬停在不同的区域上。

我的第一种方法是创建一个以平面图为背景的 div。
在那个 div 里面我添加了 100 个更小的 div，所有的尺寸都是 10%x10%。 （10 上，10 下）

这实际上显示了平面图顶部的小矩形 div，我的想法是让 jquery 根据用户将悬停的 div 显示不同的图片或选项。

我对这种方法的问题是我无法将主 div 的尺寸限制为平面图图像的纵横比，这并不方便，因为我想要一个适用于我可能上传的多个计划的解决方案。

我的另一种方法是将图像包含在带有 img 标签的主 div 中，并在其顶部显示较小的 div，但我无法使用 css 做到这一点，我所做的任何事情都会将小 div 放在图片

我可以实现的任何其他想法/方法？ 有没有办法将 div 限制为其背景图片的比例？ 第二种方法的合适CSS是什么？为了在背景中显示一个img标签，然后在它上面显示100个div？

提前感谢， 如果我的描述不清楚，请要求澄清

Answer 1

听起来像是 image map 的用途。