Как сделать несколько ссылок на одной картинке | HTML

Ранее было рассмотрено как сделать картинку ссылкой.

Две, три и более ссылок на одном изображении

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

<style>
#raz {
  position: relative;
  display: inline-block;
}
#raz a {
  position: absolute;
  border: 1px solid rgba(255,255,255,.5);
}
#raz a:nth-of-type(1) {
  left: 10%;
  top: 17%;
  width: 22%;
  height: 20%;
}
#raz a:nth-of-type(2) {
  left: 37%;
  top: 26%;
  width: 22%;
  height: 20%;
  border-radius: 100px / 20px 20px 60px 60px;
  transform: rotate(-12deg);
}
#raz a:nth-of-type(3) {
  left: 58%;
  top: 18%;
  width: 25%;
  height: 18%;
  border-radius: 100%;
}
#raz a:hover {
  background: rgba(255,255,255,.3);
}
</style>

<span id="raz">
  <img src="http://img-fotki.yandex.ru/get/4414/63641203.16/0_6c04a_2e684832_M" alt="медвежата у реки">
  <a href="#raz1" title="Михайло Потапыч"></a>
  <a href="#raz2" title="Мишутка"></a>
  <a href="#raz3" title="Топтыгин"></a>
</span>

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

Когда требуются сложные фигуры, то можно использовать ссылку area [w3.org]. Чтобы связать её с изображением, в атрибуте usemap тега img следует прописать name тега map, который является её (ссылки) контейнером. К сожалению, area нельзя задать стили CSS.

Атрибуты тега area

Атрибут	Значения	Описание
href	URL	Адрес страницы сайта, на который нужно перейти
shape	poly (многоугольник) rect (прямоугольник) circle (круг)	Форма области ссылки
coords	для многоугольника: координаты всех углов (координаты каждого угла определяются двумя значениями: первое — расстояние от левого края изображения, второе — расстояние от верхнего края изображения) для прямоугольника: координаты двух противоположных углов для круга: координаты центра круга и радиус	Координаты в px. Рекомендуется воспользоваться этим генератором.
alt	текст	Альтернативный текст ссылки
download	имя файла (необязательно)	Указывается браузеру, что файл, на который ведёт ссылка, требуется скачать
target	_self (в текущей вкладке или текущем iframe) _parent (в текущей вкладке или во фрейме-родителе) _top (в текущей вкладке) _blank (в новой вкладке/окне) name (в iframe с указанным name)	Указывается браузеру где открыть веб-документ

<img src="http://img-fotki.yandex.ru/get/4414/63641203.16/0_6c04a_2e684832_M" alt="медвежата у реки" usemap="#bears">

<map name="bears">
  <area shape="poly" coords="76,163,71,147,75,133,71,124,70,109,65,101,66,96,64,91,65,87,65,76,71,66,71,63,67,61,61,63,57,67,52,64,43,65,41,66,36,65,29,59,24,62,24,67,28,73,27,80,29,89,22,99,17,105,14,113,15,130,14,143,16,152,14,158,13,162,16,166,60,167,67,168,78,168" href="#raz1" alt="Михайло Потапыч" title="Михайло Потапыч">
  <area shape="poly" coords="78,168,76,163,71,147,75,135,78,132,84,131,87,133,95,117,91,109,91,102,87,100,85,93,87,90,89,90,92,92,96,94,104,89,108,88,116,90,119,86,119,83,123,83,123,83,125,91,124,96,127,103,127,108,130,117,133,130,130,130,127,130,123,133,121,135,122,139,126,147,130,150,136,153,138,158,141,159,138,163,134,164,132,167,132,167,128,169,124,172,118,173,110,172,101,173,92,170" href="#raz2" alt="Мишутка" title="Мишутка">
  <area shape="poly" coords="133,130,130,130,127,130,123,133,121,135,122,139,126,147,130,150,136,153,140,151,142,148,142,154,142,157,133,164,133,168,145,170,149,168,151,163,153,165,154,165,157,164,162,164,172,170,172,170,173,170,173,170,179,169,180,171,198,174,201,168,204,160,201,155,204,140,201,127,200,118,193,105,189,94,183,86,179,85,175,78,177,71,174,66,170,66,166,71,157,70,154,72,145,64,140,67,139,70,145,79,143,84,143,87,138,97,141,103,147,104,152,102,149,119,137,134" href="#raz3" alt="Топтыгин" title="Топтыгин">
</map>

SVG для резинового IMG

SVG [mozilla.org] — это отдельная очень большая история. Из минусов: не такая повсеместная поддержка браузерами, как у map. points для polygon можно определить тем же инструментом или вытянуть координаты из Фотошопа, предварительно воспользовавшись "Быстрым выделением" (горячая клавиша W).

<!-- 225 — ширина изображения; 300 — высота изображения (проблемно для IE, нужна дополнительная обёртка с указанием пропорций); -->

<svg viewBox="0 0 225 300" width="225px">
  <a xlink:href="#1" title="Михайло Потапыч"><polygon points="76,163,71,147,75,133,71,124,70,109,65,101,66,96,64,91,65,87,65,76,71,66,71,63,67,61,61,63,57,67,52,64,43,65,41,66,36,65,29,59,24,62,24,67,28,73,27,80,29,89,22,99,17,105,14,113,15,130,14,143,16,152,14,158,13,162,16,166,60,167,67,168,78,168"/></a>
  <a xlink:href="#2" title="Мишутка"><polygon points="78,168,76,163,71,147,75,135,78,132,84,131,87,133,95,117,91,109,91,102,87,100,85,93,87,90,89,90,92,92,96,94,104,89,108,88,116,90,119,86,119,83,123,83,123,83,125,91,124,96,127,103,127,108,130,117,133,130,130,130,127,130,123,133,121,135,122,139,126,147,130,150,136,153,138,158,141,159,138,163,134,164,132,167,132,167,128,169,124,172,118,173,110,172,101,173,92,170"/></a>
  <a xlink:href="#3" title="Топтыгин"><polygon points="133,130,130,130,127,130,123,133,121,135,122,139,126,147,130,150,136,153,140,151,142,148,142,154,142,157,133,164,133,168,145,170,149,168,151,163,153,165,154,165,157,164,162,164,172,170,172,170,173,170,173,170,179,169,180,171,198,174,201,168,204,160,201,155,204,140,201,127,200,118,193,105,189,94,183,86,179,85,175,78,177,71,174,66,170,66,166,71,157,70,154,72,145,64,140,67,139,70,145,79,143,84,143,87,138,97,141,103,147,104,152,102,149,119,137,134"/></a>
  <style>
    svg {
      max-height: 100%; /* для резинового изображения, которое изменяется согласно пропорциям, указанным в viewBox */
      max-width: 100%;
      background: url(http://img-fotki.yandex.ru/get/4414/63641203.16/0_6c04a_2e684832_M);
      background-size: 100%;
    }
    polygon {
      fill: rgba(0,0,0,0); /* фон */
      stroke: rgba(255,255,255,.5); /* цвет границы */
      stroke-width: 1; /* толщина границы */
    }
    polygon:hover {
      fill: rgba(255,255,255,.3);
    }
  </style>
</svg>