Как грамотно использовать позиционирование элементов при различных разрешениях экрана?

Question

[Антон]

Добрый день!
Возникла идея сделать страничку, которая представляет из себя комнату. В этой комнате находятся: стол, окно, ПК, лампа и т.д.

Html код страницы - стандартный шаблон bootstrap. Ничего своего я не добавлял.
Css код страницы:

html, body{
    height: 100%;
}

body {
    background: #2C3E50 url(../images/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Хочу сделать так, чтобы некоторые элементы этой комнаты были кликабельны: нажал на пк - появилось окно с одной информацией, нажал на окно - другой действие. Для этого нужно использовать position: absolute с координатами. Но если я для своего разрешения экрана смогу задать точное позиционирование, то при других разрешениях будут сдвиги. Подскажите, пожалуйста, как мне сделать грамотное позиционирование для любого разрешения экрана?

Answer 1

[Алексей Ярков]

Если бы для одного разрешения, то я бы сделал так:
tag_area
UPD#1: Нашел то что вам нужно: image-map-resizer

Comments

[Антон]

Хм, отличный пример! Это, получается, координаты в тегах area я должен буду сам прописывать?

[Алексей Ярков]

Антон: Да. Я бы погуглил какой-нибудь генератор

[Антон]

Алексей Ярков: спасибо большое! Буду пытаться :)

[Антон]

Алексей Ярков: подскажи, пожалуйста, почему у меня area скрыты в теге map? Это я смотрю через "исследовать элемент".

Answer 2

[semki096]

в процентах

Comments

[Антон]

При различных разрешениях экрана даже координаты в процентах различаются. Разве нет?

[Лучник *range attack +10*]

Тогда используйте позиционирование по родителю, поставив контейнеру relative, а элементам absolute и используйте медиа-запросы. В медиа запросах как раз прописана ширина контейнера для всех разрешений.

[Антон]

Константин Огуреев-Скворцов-Грушин: да, я думал в сторону media, но как-то геморрно всё это будет. Может, есть вариант попроще?

[Лучник *range attack +10*]

Антон: Если у вас сайт адаптивный, то использование media — правильное решение, а не костыль.

[Антон]

Константин Огуреев-Скворцов-Грушин: тогда в медиа-запросах нужно указывать отступы строго в пикселях. Верно?

[Лучник *range attack +10*]

Можно попробовать вставить в html код картинки из svg файла и тогда позиционирование не нужно.

[Антон]

Константин Огуреев-Скворцов-Грушин: а как же тогда кликабельность по элементам?

[Лучник *range attack +10*]

Антон: в ссылку оберните. svg — тот же hml с инлайново прописанным css.

Answer 3

[xmoonlight]

Вообще, такие вещи делаются в SVG или канвасе. Но если нужна именно картинка - можно сделать через:
1. Относительное масштабирование кликабельной зоны, наложенной на изображение.
При этом - можно организовать "фонарик" или бордер на изображение, выделяя элемент на который навели курсор. Что-то вроде 2D raycasting.

2. Также можно создать слой под слоем ("пирог") через z-index, нарезав кликабельные куски изображений и вставив их в каждый слой с абсолютным ПРОЦЕНТНЫМ! смещением внутри контейнера. Будет что-то вроде сегментированной аппликации и в целом - получите ту же самую картинку с нужным функционалом.

Comments

[Антон]

Не совсем подходит. Вариант с картой выше очень хорошо подходит, так как можно задавать ссылки любой формы.

[xmoonlight]

Антон: ну стандартная карта - да. но можно же еще свои зоны делать через JS. или в п.2 - там просто ссылки на картинки, т.к. они будут спозиционированы и наложены друг на друга - эти зоны появятся автоматом.
(здесь в принципе любой из 3-х методов имеет право на жизнь)

[Антон]

xmoonlight: я начал использовать метод с картой (используя и ). Столкнулся с такой проблемой: нажимаю "исследовать элемент", а у меня почему-то там будто скрыты все теги . В чём может быть проблема?

[Антон]

xmoonlight: хотя нет. Вариант с картой не совсем подходит что-то. Я загружаю в онлайн генератор картинку (а она большого разрешения), получаю координаты (большие, соответственно). Использую тот css код, который выше. Получается, что у каждого юзера своё разрешение экрана. И выходит, что те координаты не подходят ему. Что в таком случае делать?

[xmoonlight]

Антон: на JS надо динамически после загрузки заменить клик-мэп-координаты исходя из текущего размера страницы.

[Антон]

xmoonlight: можете, пожалуйста, пример кода показать/написать? Я очень плох в этом.

[xmoonlight]

Антон: я не работаю с картой кликов, поэтому мне на это надо время чтобы вникнуть.