Меню категорій

Адаптивна карта зображень як елемент декору сайту

Хочеш цікаве меню на сайт у вигляді однієї картинки? У цій статті я докладно розповім, як можна легко організувати адаптивну карту зображень.

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

Адаптивна карта зображень як елемент декору сайту

Уяви собі, що ти бажаєш зробити стрілку з написом “ONE WAY” посиланням на один сайт, а стрілку з написом “OR ANOTHER” – посиланням на інший сайт. Цього можна легко добитися за допомогою карти зображень, синтаксис якої виглядає отак:

<img src="image.jpg" alt="image" usemap="#newmap">

<map name="newmap">
  <area shape="rect" coords="10,20,40,50" alt="" href="">
  <area shape="rect" coords="100,120,140,150" alt="" href="">
</map>

Як бачиш, ми створюємо карту з назвою newmap, у якій вказуємо площини area з координатами coords, кліки по яких ведуть за посиланнями href. Потім ми даємо команду зображенню використовувати дану карту: usemap="#newmap".

Ніби все не так і складно. Але як точно вирахувати координати площин? Можна методом наукового тику, підставляючи значення і тестуючи в реальному часі. Можна завантажити зображення в якийсь серйозніший графічний редактор, який в реальному часі показує координати положення курсора, і таким чином визначити координати швидше. А можна скористатися готовим сервісом створення карти зображень, яких в інтернеті сила-силенна. Зараз розглянемо кілька варіантів.

Free Online Image Map Generator

Чудовий сервіс, знаходиться за адресою https://www.image-map.net. Відразу пропонує завантажити зображення з комп’ютера чи вказати його адресу в інтернеті:

Адаптивна карта зображень як елемент декору сайту

Після того, як зображення завантажене, додаєш площини для посилань внизу зображення та обираєш на зображенні потрібну ділянку:

Адаптивна карта зображень як елемент декору сайту

Ти можеш обрати прямокутну, круглу або довільну площину:

Адаптивна карта зображень як елемент декору сайту

В цьому випадку нас цікавить довільна площина, адже ми будемо обводити стрілки. Після невеличких старань у мене вийшла ось така картина:

Адаптивна карта зображень як елемент декору сайту

Після закінчення вибору ділянок тиснеш кнопку Show Me the Code! і отримуєш готовий код для вставки на сайт:

Адаптивна карта зображень як елемент декору сайту

Все було б чудово, і статтю можна було б завершувати, але…

Тільки-но ти спробуєш змінити розмір зображення, як із картою зображень почнуться проблеми. Координати площин при зміні розміру зображення залишаться такими ж, тобто не збігатимуться із зображенням. Наочно це можна зобразити приблизно отак (площини посилань виділені червоним відтінком):

Адаптивна карта зображень як елемент декору сайту
До зміни розміру
Адаптивна карта зображень як елемент декору сайту
Після зміни розміру

Як бачиш, адаптивністю тут навіть не пахне. Що ж робити? Для початку пошукаємо інший сервіс який буде малювати карту зображень не в пікселях, а у відсотках.

Responsive Image Map Generator

Сервіс схожий на попередній, за виключенням того, що малює площини карти зображень із прив’язкою до відсотків, а не пікселів, а це величезний крок до адаптивності.

Знаходимо його за посиланням https://www.zaneray.com/responsive-image-map. Тут немає можливості завантажити зображення з комп’ютера, лише за посиланням:

Адаптивна карта зображень як елемент декору сайту

Далі все просто. Додаєш необхідну кількість блоків, внизу копіюєш код, і все:

Адаптивна карта зображень як елемент декору сайту

Такі карти зображень цілком адекватно поводяться при зміні розміру зображення. Але є один нюанс: блоки посилань можуть бути лише прямокутної форми, круглої та довільної не передбачено.

Що ж, повернемося до попереднього сервісу, але додамо трішки магії JavaScript 😉

Image Map Resizer

Забув уточнити – власне, ніякого велосипеда ми придумувати не будемо, а використаємо готову бібліотеку Image Map Resizer. Відразу опускаємося до заголовка Native JS Usage та звантажуємо собі на комп’ютер скрипт imageMapResizer.min.js:

Адаптивна карта зображень як елемент декору сайту

Розміщуємо його в себе на сервері, я розмістив у тому ж каталозі, що основний HTML-файл. Тепер на сторінці із картою зображень перед кінцевим тегом body вставляємо наступний код:

<script>
    imageMapResize();
</script>

Все, тепер карта зображень змінюватиме розмір разом із зображенням.

Позиціонування

Такий спосіб організації карти зображень чудово працюватиме аж до моменту, коли ти захочеш вмістити зображення в блок, приховуючи зайве. Ось так поводитиметься JavaScript при доданій до зображення властивості object-fit: cover:

Адаптивна карта зображень як елемент декору сайту
Звичайний блок

Звужений блок

Як бачиш, відсотки вираховуються від видимої частини зображення. На сьогодні я не знайшов робочого рішення, щоб подружити адаптивну карту зображень із властивістю cover. Зате придумав, як вийти з ситуації, коли потрібна прив’язка до висоти блока.

В наступному прикладі зображення буде змінювати розміри відносно висоти екрана, а по ширині зображення буде обрізатися при зменшенні ширини дисплея або розташовуватися по центру, якщо ширина дисплея буде більшою від ширини зображення:

HTML

<article>
    <div class="blue"></div>
    <div class="yellow"></div>
    <div class="image">
        <img id="main-image" src="main-image.png" alt="" usemap="#image-map">
        <map name="image-map">
            <area target="" alt="" title="" href="#link1" coords="897,348,971,286,1361,221,1359,358,971,386" shape="poly">
            <area target="" alt="" title="" href="#link2" coords="924,662,1493,626,1599,683,1505,757,922,797" shape="poly">
        </map>
    </div>
</article>

<script type="text/javascript" src="imageMapResizer.min.js"></script>
<script>
    imageMapResize();
</script>

CSS

article {
    height: 100vh;
}
.blue {
    width: 100%;
    height: 90.2%;
    background: #2b7ffe;
}
.yellow {
    width: 100%;
    height: 9.8%;
    background: #ffcc00;
    margin: 0;
}
.image {
    margin: -100vh;
    height: 100%;
    overflow: hidden;
}
#main-image {
    margin: 0 auto;
    height: 100%;
}

Блоки blue та yellow задані спеціально для заповнення пустот по краях екрану за умови збільшення ширини.

Робочий приклад сторінки можна подивитися отут: https://autoclub-tso.com.ua

У мене все, зустрінемось незабаром. Щасти тобі!

Прокоментувати