Способы привязки ссылок к фигурам и изображениям с помощью HTML и CSS
Возможно, на вашем сайте есть изогнутый баннер, для которого нужно создать многогранную область клика. Тег <a> позволяет создать только кликабельный прямоугольник. Но есть способы, с помощью которых можно изменить его форму.
Фигуры SVG
Для кликабельных изображений можно использовать формат SVG. Самый простой способ сделать часть SVG-изображения кликабельной - это добавить в разметку элемент гиперссылки SVG. Для этого нужно обернуть элемент в <a>. Это может быть простая фигура, сложные контуры или группа SVG-элементов.
В приведенном ниже примере ссылка охватывает круг, а другая – часть фигуры стрелы.
В этой демонстрации я использовала устаревшее свойство xlink:href, чтобы ссылка работала в браузере Safari.
При реализации данного подхода нужно убедиться, что тег <a> находится внутри разметки SVG. А также что он оборачивает фигуру, которую нужно сделать кликабельной.
Карты изображений
Чтобы добавить кликабельную область на фото, можно использовать карту изображений.
Она будет перекрывать все изображение. Поэтому нужно будет определить область клика.
Карты изображений появились в HTML 3, поэтому они поддерживаются всеми браузерами. Для их стилизации используется CSS и JavaScript.
В W3 Schools есть отличный пример использования карты изображений. На ней изображена солнечная система. Клик по поверхности любой из планет отобразит ее увеличенное фото. Все остальные области изображения не кликабельны. Координаты областей, определенных в карте, соответствуют расположению солнца и планет на базовом изображении.
В следующем примере для стилизации областей клика используется jQuery. Обратите внимание, как карта накладывает изображение и как координаты используются для создания целей.
Вернемся к фигуре из примера с использованием SVG, которое заменим растровым изображением. Нам нужно привязать ссылку к стреле и центру мишени. Мы знаем ее координаты X и Y, а также радиус в базовом изображении. Поэтому довольно просто определить круг области клика.
С фигурой стрелы все сложнее. Я использовал сервис image-map.net для построения фигуры и создания области для карты изображения. Она состоит из многоугольника и круга для закругленного края в верхней части.
Clip-path
Свойство clip-path позволяет определить область клика без использования JavaScript. В данном случае у нас есть область клика в форме пятиконечной звезды.
В приведенном ниже примере показано использование clip-path, примененного к JPEG-изображению и абсолютно позиционированной гиперссылке.
В следующем примере я объединила фигуру крестика с SVG-элементом гиперссылки, чтобы создать начало интерактивной игры в крестики-нолики. Здесь SVG используется для того, чтобы область в середине фигуры «O» была не кликабельной. Хотя для фигуры крестика, которая является многоугольником, достаточно было бы использовать CSS-свойство clip-path.
CSS фигуры без прозрачных границ
Существуют и другие варианты создания с помощью HTML и CSS элементов непрямоугольной формы Но не все из них будут изменять форму области клика.
Большинство приемов создания фигур с помощью CSS основаны на использовании прозрачных границ.
Ниже продемонстрирована фигура сердца, которая не зависит от прозрачных границ. Она является единственной кликабельной областью элемента.
В следующем примере с помощью прозрачных границ создается фигура треугольника. Но область клика не повторяет форму фигуры. Наведите указатель мыши на элемент, и вы увидите ее истинный размер.
Надеемся, что это руководство дало вам базовое понимание способов создания интерактивных областей на изображениях и фигурах с помощью HTML и CSS.