Какой есть плагин JS для работы с изображением по координатам?

Question

[ademar26]

Добрый день, подскажите плз с помощью чего можно реализовать подобный функционал как на этом сайте.
www.na-oboi.ru/products/moguchee_derevo
Тоесть в чем смысл.
К примеру загружается изображение в админке
Далее формируем поле для определения цвета. На картинке выделяем области мышкой, ставить точки видимости к примеру. И так далее, следующее поле снова выделяем.
Далее на стороне фронта как по ссылке.

Подскажите плз, чем это можно реализовать ?

Comments

[Kovalsky]

Вкратце: я ничего не понял.

Насколько я могу видеть, на приведенном вами сайте просто есть картинка состоящая из одного элемента и есть два блока с цветами, тыкая на которые можно выбирать цвета для этого элемента и фона. Что за "На картинке выделяем области мышкой, ставить точки видимости к примеру. И так далее, следующее поле снова выделяем."? То есть я могу предположить как это может выглядеть, но рассчитывал увидеть похожее в вашем примере, и не увидел. В общем, пока не догоняю

[ademar26]

Вот

[ademar26]

Точки координаты.

[Kovalsky]

ademar26, я правильно понимаю, что на верхнем скрине я вижу картинку, которую пользователь вручную разбил на зоны? А на нижнем скрине... а на нижнем скрине я пока не понял что.

[ademar26]

Никита Полевой, Нижний это сама картинка которую выбираешь. Тупо выбор.
В верхнем она уже разбивается на зоны.

[Kovalsky]

ademar26, можно попробовать imgAreaSelect адаптировать под это дело

[ademar26]

Никита Полевой, в нем выделение мышкой идет ?

[Kovalsky]

ademar26, да

Answer 1

[S-a-n-d-r-0]

Посмотрел, как они это сделали. И я б сам до такого не додумался. Короче это просто картинка png, у которой прозрачными областями нарисованы ветки/птички и т.п. И при наведении меняется фон под этой картинкой. Могу предположить, что они это сами написали, т.к. сделать такое на js пара минут. Но если найдете такой плагин - маякните, самому интересно)

Comments

[Kovalsky]

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