Позиционирование ссылок на изображении
Две, три и более ссылок на одном изображении
С помощью position: absolute; можно наложить ссылку поверх рисунка. Форма ссылки ограничена возможностями свойств border-radius и transform.
Сыроежка в лесу
Создание карты изображения в HTML
Если нужно создать ссылки на сложные фигуры, используем ссылку ссылку area [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-area-element w3.org]. Чтобы связать её с изображением, в атрибуте usemap тега img следует прописать name тега map, который является её (ссылки) контейнером. К area нельзя задать стили CSS.
| Атрибут | Значения | Описание |
| href | URL | Адрес страницы сайта, на который нужно перейти |
| shape | poly (многоугольник) rect (прямоугольник) circle (круг) |
Форма области ссылки |
| coords | для многоугольника: координаты всех углов (координаты каждого угла определяются двумя значениями: первое — расстояние от левого края изображения, второе — расстояние от верхнего края изображения)
для прямоугольника: координаты двух противоположных углов для круга: координаты центра круга и радиус |
Координаты в px. Упрощенный генератор точек. |
| alt | текст | Альтернативный текст ссылки |
| download | имя файла (необязательно) | Указывается браузеру, что файл, на который ведёт ссылка, требуется скачать |
| target | _self (в текущей вкладке или текущем iframe) _parent (в текущей вкладке или во фрейме-родителе) _top (в текущей вкладке) _blank (в новой вкладке/окне) name (в iframe с указанным name) |
Указывается браузеру где открыть веб-документ |
Сыроежка на болоте
Информация может быть полезной
