Как сделать кликабельным разные части изображения? - Общие вопросы веб разработки

Как сделать кликабельным разные части изображения, да не просто а масштабирующегося.

На картинке справа сверху вниз идут четыре кнопки, как бы к ним ссылки прикрутить.

position:absolute

position:absolute

Ну а как я ссылки поверх картинки размещу, если сайт адаптивный? Сожмется экран, сожмется картинка, а локи со ссылками нихрена не сожмутся, особенно если они размещены вертикально.

ну тут 100500 вариантов.
можно вообще через map сделать, можно через svg.
можно для меньших размеров другое меню выводить.

Ну а как я ссылки поверх картинки размещу, если сайт адаптивный?

% спасут отца русской демократии.

% спасут отца русской демократии.

+ медиа квери для ключевых разрешений экрана

гемор конечно тот еще, но что делать )) Либо да, через svg более универсальный вариант но и сложнее в исполнении

Но насколько я знаю проценты можно только от ширины только указывать, мне что, делать четыре ссылки в нижней части картинки, а потом крутить блок на 90 градусов? Бред какой-то получится. Ладно, буду думы думать, вообще не вариант на картинке кнопки делать, хотя заказщик просит именно это, попробую уговорить на другой вариант.

делаете блок с позишин релатив, картинку фоном и указать background-size: contain
размеры блока по ширине указать в % от родительского (к примеру 100% ширины контента)
в этом блоке абсолютно позиционировать 3 ссылки в % left\top
получится что при уменьшении размера экрана картинка постоянно будет целиком в этом блоке и ссылки будут соответственно на своих местах

показали б хоть скрин что нужно в итоге получить

del

О_о я просто не знал, что так можно. Спасибо) Потом покажу, что получилось.

Ребята! Спасибо) Понял механизм, удалось сделать кликабельные области, сохраняя адаптивность. На картинке полупрозрачным блочной ссылкой обвел надписи, все работает. Блин, как же здорово, когда можно вот так, просто спросить и получить помощь. Обожаю Open Source сообщества. Еще раз, всем спасибо.

dm-krv всегда рады помочь, но еще бы лучше было бы видеть готовый результат в сети, чтобы понять, собственно, что мы советовали

Да собственно там все еще в процессе, но вот пример [ссылка удалена]

На картинке надписи удалось кликабельными сделать именно благодаря Вашей помощи.

Сайт удалю к выходным, это просто копия оригинала, который попросили доработать.

Надписи бы лучше затёрли, а в ссылке добавляли, чтоб при наведении эффект был...

Надписи бы лучше затёрли, а в ссылке добавляли, чтоб при наведении эффект был...

При масштабировании надписи текстом не будут уменьшатся. Конечно, можно текст отдельной картинкой навесить и ховером фон ссылочных блоков менять, но это мороки много. Меня о чем попросили то и сделал, лишний раз возится не хочется) Но в выходные поэксперементирую еще, возможно действительно какой-нибудь эффект стоить добавить для наглядности.

не надо так делать, создавайте для ссылки класс (один общий для общих стилей и уникальный для каждой ссылки, типа class="item item1") и в файле стилей пишите уже, инлайновый CSS это плохо.

Желтый текст на сером фоне практически нечитаем.

Картинки не мои, что дали, то и вывесил. Почему инлайн это плохо? Не первый раз слышу, но как-то не понимаю почему.

Почему инлайн это плохо? Не первый раз слышу, но как-то не понимаю почему.

потому что если вы потом для этого элемента укажите стили в файле CSS - они не сработают, поскольку инлайновые имеют более высокий приоритет
ну и просто это крайне неудобно, загромождение и дублирование кода. Есть 10 элементов с стилями типа абсолют, указан шрифт размер позиции и тд и отличаются у них только цвет.
Так вот когда вы через класс общий зададите им общие стили и через уникальный только цвет - управлять всем зоопарком будет легче.
Старайтесь никогда не использовать ни инлайновый CSS ни JS