Планировка здания для кликабельных комнат

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#, но вы можете использовать библиотеку JS, как leafletjs, чтобы отобразить общие топологические. С помощью библиотеки можно рисовать слоев на верхней части изображения, которая кликабельна ..