可点击房间的切片建筑地图[关闭]答案

【问题标题】：Slice building map for clickable rooms [closed]可点击房间的切片建筑地图[关闭]
【发布时间】：2015-02-16 00:40:42
【问题描述】：

我目前正在为一家练习室租赁公司开发一个网站。（音乐）

他们想在哪个网站上显示他们的建筑地图，然后单击您要预订的房间。不幸的是，我在这种编程方面没有太多实践，所以我需要有人帮助。

这是建筑地图：

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

您可以看到该建筑由 7 间客房、一间工作室和一间休闲室组成。每个都必须单独点击。

网站是用ASP.Net，vb开发的，我使用zurb基础框架。

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

提前谢谢，期待您的回复！

亲切的问候，

凯文

【问题讨论】：

我认为您正在寻找像 this 这样的东西，尽管规模更复杂。

标签： html asp.net .net vb.net photoshop

【解决方案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

【讨论】：

谢谢！我不知道这项技术，这将使它更容易！

【解决方案2】：

遗憾的是，我不知道如何使用 C# 来分割房间，但您可以使用像 leafletjs 这样的 js 库来显示平面图。使用该库，您可以在可点击的图像上绘制图层。..

【讨论】：