Question

我目前正在为一间练习室租赁公司工作。（音乐）

对于他们想要显示建筑地图并点击您要预订的房间的网站。不幸的是，我没有太多练习这种编程，所以我需要别人的帮助。

这是建筑地图：

https://www.dropbox.com/s/qlee8hjtmje1ljm/Bouwplan-Definitief-Public.jpg?dl=0

您可以看到该建筑包括7个房间，一个工作室和一个休闲室。每个都必须单独点击。

该网站是在ASP.Net，Vb中开发的，我使用zurb基础框架。

是否可以将房间中的图像切片并使其可点击？当然，房间与网站在建筑地图上的位置相同。

Thnx提前，我期待你的回复！

亲切的问候，

凯文

Answer 1

使用地图和区域形状

<img src="https://www.dropbox.com/s/qlee8hjtmje1ljm/Bouwplan-Definitief-Public.jpg?dl=1" width="500" height="500" border="0" alt="Karte" usemap="#mapex" />
<map name="mapex">
     <area shape="rect" coords="35,20,140,150" href="#room1" alt="Room 1"  />
     <area shape="rect" coords="145,20,250,150" href="#room2" alt="Room 2"/>
 </map>

示例：jsfiddle

Answer 2

可悲的是，我不知道如何用C＃剪掉房间，但你可以使用像leafletjs这样的js库来显示平面图。使用库，您可以在图像顶部绘制可点击的图层。

切片建筑地图可点击的房间

2 个答案: