Схемы деталей с ссылками

Судя по тому, что картинки и ссылки там не масштабируются — там есть система, аналогичная отменткам людей на фотках вконтакте. Т.е. какой-то админский интерфейс, в котором выделяется фрагмент картинки и к нему прописывается ссылка. Один раз прописали и пожалуйста.

Скорее всего прикручено еще распознавание циферок на картинке, если есть исходные данные в виде таблички справа в таком же виде, т.е. с указанием номера.

Давно, пару десятков лет назад были программы, позволявшие делать карты изображений в html — выделять на них зоны и сопоставлять с ними действия. Назывались как-то вроде image map.

Ты разве в код не заглядывал? Конечно же через map такое делается.

Или я не понял в чём твой вопрос?

Вопрос в том как это делать полуавтоматически, мышкой потыкал на изображение и создались нужные ссылки. Что-бы пользователь сам мог такие схемы создавать.

Тут посмотрите.

Аа.. Мне встречались скрипты. К сож сейчас никак не вспомню как называются.

И точно есть плагины для ВП — видел в репо несколько шт в своё время.

———- Добавлено 19.06.2020 в 11:16 ———-

Вот один старенький нашелся https://wordpress.org/plugins/imagelinks-interactive-image-builder-lite/. Возможно поможет нащупать путь поиска, если ничего другого не найдется.

Если потыкать, то несложно. За 5 мин болванка из которой можно все что угодно развить

document.getElementById('iiii').addEventListener('click', function (event) {

  let b = this.getBoundingClientRect(),

    x = event.x - b.left - 10,

    y = event.y - b.top -10;

  console.log(b, x, y)


  /* 

  * ну так на всякий, если скадрировано, то координаты можно пересчитать с поправкой на коэф

  */

  console.log(

    this.clientWidth,

    this.clientHeight,

    this.naturalWidth,

    this.naturalHeight

  )

  var div = document.createElement("div")

  div.style.position = 'absolute';

  div.style.width="20px";

  div.style.height="20px";

  div.style.top = y+'px';

  div.style.left = x+'px';

  div.style.background = 'rgba(255,0,0,.2)';

  this.parentNode.appendChild(div);

});

SeVlad, спасибо, судя по примерам можно сделать больше чем просто меток наставить, для схемы хватит.