Как сверстать адаптивно блок выбора этажа?

Question

[Раман]

Приветствую!

Гуру вёрстки, подскажите пожалуйста как сверстать адаптивно блок выбора этажа на здании как на макете ниже?

Comments

[simka alien]

полигон - это на svg ?

[Раман]

simka alien: Необязательно, но на svg думаю будет правильней для retina. Интересны разные варианты.

[simka alien]

ramanzh: рисовать долго , а интересует map ?

[Раман]

simka alien: Здесь пожалуйста яснее, не понял вопроса :)

[simka alien]

Раман:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="8-2-19.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" title="" href="" coords="40,179,289,208,286,233,36,205" shape="poly">
</map>

https://www.image-map.net вот сюда загрузи фотку с домами - обведи - и сохрани код и проверь потом ... отпишись

[Раман]

simka alien:

Попробовал: https://codepen.io/familyyy-y/pen/GEOmZG
Обвёл секции 1 и 2

Не разобрался:

• как подсвечивать области,
  
• как внутри одной области сделать другие (выбираем дом, затем на выбранном доме выбираем этаж),
  
• как это всё адаптировать, так как при уменьшении картинки области соответственно остаются на месте.
  

Может быть это можно реализовать с помощью D3.js?

[Astrohas]

Сделайте как на десктопной версии
Мне в данном случае больше по душе засунуть это все внутри контейнера с горизонтальным скроллом.

[Раман]

Хасан Истамкулов:

Знаете как подсвечивать области и создать внутри одной области другую (на макете выбираем дом, затем этаж в выбранном доме)?

[Максим Тимофеев]

Кажется я уже видел этот вопрос с этой картинкой несколько месяцев назад. Совпадение? Или до сих пор?

[Astrohas]

Раман: хм, до такого извращения руки мои еще не доходили, но сделал бы я так:
На фотошопе, разделил бы главную картинку на дома,
Затем создал бы карты (map) для каждого этажа
Посредством javascript-а связал бы ховер для area с всплывающим элементом

[Kovalsky]

Максим Тимофеев: не, просто таких вопросов дохрена (только несколько из поиска 1, 2, 3), я сам уже несколько раз отвечал на подобные.

[Раман]

Максим Тимофеев: Наверное совпадение, проект свежий.

[Раман]

Никита Полевой: Здесь предостаточно вариантов реализации, благодарю. Поиском по тостеру сам к сожалению не проходился, а зря.

[Раман]

Артём Петренков:
Есть отдельный фильтр по подбору квартиры по планировке для тех кто сначала выбирает планировку, и есть для тех кто сначала хочет выбрать этаж. Поэтому все довольны:)

Answer 1

[Евгений]

egenius.rocks/sites/map как-раз делал давеча :) ковыряй ;)

Comments

[Раман]

Благодарю.

Евгений, подскажи пожалуйста сколько это заняло времени, когда есть макет?

[Евгений]

Раман: часов 15-20 примерно... это был мой первый опыт - так что пришлось искать решения

Answer 2

[mletov]

1) Обводите этажи, например, в Gimp
2) Генерите тэг map area с координатами
3) Используете плагин www.outsharked.com/imagemapster

Answer 3

[Раман]

Для решения вопроса, как я понял можно использовать:
– d3.js
– svg.js
– ImageMapster
– Responsive Image Maps jQuery Plugin