Позиционирование ссылок на изображении

Позиционирование ссылок на изображении

Две, три и более ссылок на одном изображении
С помощью position: absolute; можно наложить ссылку поверх рисунка. Форма ссылки ограничена возможностями свойств border-radius и transform.

Сыроежка в лесу


медвежата у реки

 

Создание карты изображения в HTML

Если нужно создать ссылки на сложные фигуры, используем ссылку  ссылку area [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)
Указывается браузеру где открыть веб-документ

Сыроежка на болоте
сыроежка в лесу

Шляпка Ножка Мох