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

Samail
На сайте с 10.05.2007
Offline
328
178

Вот такие схемы на чём делаются? https://www.ilcats.ru/bmw/?function=getParts&catalog=VT&market=RUS&model=320d&engine=B47&serie=Lim&modelcode=59541&date=20180800&steering=L&transmission=N&group=12&subgroup=12_1946

Не руками-же они координаты ссылок считают.

ДП
На сайте с 23.11.2009
Offline
190
#1

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

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

SergejF
На сайте с 07.06.2008
Offline
584
#2
Samail:
Вот такие схемы на чём делаются?

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

Momenta... Этнографические заметки: http://www.sbible.ru/vasil1.htm
SV
На сайте с 03.11.2008
Offline
1393
#3
Samail:
Вот такие схемы на чём делаются? https://www.ilcats.ru/bmw/?function=...bgroup=12_1946
Не руками-же они координаты ссылок считают.

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

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

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Топики помощи с ⓌordPress (https://searchengines.guru/ru/forum/1032910 ) и основы безопасности сайтов ( https://searchengines.guru/ru/forum/774117 ). *** Помощь\консультации в топиках форума - БЕСПЛАТНО. Платные услуги ( https://wp.me/P3YHjQ-3 ) - с бюджетом от 150$ ***
Samail
На сайте с 10.05.2007
Offline
328
#4
SeVlad:
Или я не понял в чём твой вопрос?

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

SergejF
На сайте с 07.06.2008
Offline
584
#5
Samail:
Вопрос в том как это делать полуавтоматически, мышкой потыкал на изображение и создались нужные ссылки.

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

SV
На сайте с 03.11.2008
Offline
1393
#6
Samail:
Вопрос в том как это делать полуавтоматически

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

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

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

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

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

T7
На сайте с 19.09.2018
Offline
34
#7
Samail:
мышкой потыкал на изображение и создались нужные ссылки

Если потыкать, то несложно. За 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);
});
Samail
На сайте с 10.05.2007
Offline
328
#8

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий