Как сделать несколько ссылок на одной картинке | 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>
в f t
наверх ↑

2 комментария:

Блокнот вебмастера
А как сделать, чтобы при ссылке по картинке открывались в новых вкладках сразу две картинки?
NMitra
См. http://shpargalkablog.ru/2014/10/window-open-javascript.html#two