Как правильно верстать такие сайты?

Question

[Сергей Горячев]

Привет, у меня вопрос в следующем, как правильно верстать такие сайты?
mayak-house.ru/kvartiry
mayak-house.ru/kvartiry/7-9
Честно, плохо разбираюсь в чужом коде, чтобы понять логику.
Какие макеты просить от дизайнера? От 3d моделера?

Answer 1

[test13r]

В данном случае использовались изображение формата jpg, размером 2640 x 1440 и весом 1.53 МБ, которое воспринимается как фон, но по факту фоном не является :)
Поверх него векторный слой svg с размечеными областями (в качестве редактора можно юзать Inkscape). Собственно вся магия реализована при помощи JS баблиотеки Raphaël.
Комплект на проверку оказывается не сложный: файлы изображения и svg от дизайнера, остальная работа за фронтенд девелопером.

Answer 2

[Дмитрий Новиков]

обычно вся картинка идет фоном, а на ней размечаются невидимые области-ссылки, при наведении на которые появляются дополнительные элементы (подсвеченные здания, этажи с включенным светом и т.д.) - вот эти элементы нужно отдельно запросить у дизайнера. еще обязательно уточните параметры резиновости/адаптивности и кроссбраузерность, чтобы потом не было вопросов. области для наведения произвольной формы можно задавать при помощи map-area, советую генерировать из картинки.

Comments

[bromzh]

Там не map area, а svg, который (видимо) рисуется рафаэлем.

Answer 3

[Дмитрий Кравченко]

это обычная png картинка, сверху которой положен слой свг, в котором отлавливается hover и производится вся "магия"