Схематическое изображение производственного процесса
 

Добрый день.
По долгу службы так совпало, что от меня требуется выполнение задания, в котором я мало что понимаю, потому вынужден обратиться за помощью. Сам я некоторое время увлекался изучением java, но дальше звания дилетанта, к сожалению, не продвинулся.

В общем:

Требуется создать тематический раздел уже готового сайта, в котором будет реализована возможность создавать схематическую визуализацию производственного процесса предприятия. Под схематической визуализацией понимается:
• Возможность создания некоторого количества «фигур», которые подразумевают под собой реальные стенды, на которых находится продукция.
• При наведении курсора на «фигуру» появляется всплывающее окно, которое информирует какая именно продукция находится на стенде, дату прихода и отгрузки продукции со стенда и фото непосредственного продукта.
• Возможность ежедневного редактирования информацию по каждому вышеперечисленному пункту (загрузка новой фотографии, обновление информации о движении товара).

Я понимаю, что задача, по сути является "плевым делом" для опытного сетевого разработчика, но так как я коим не являюсь прошу у вас совета.
Какими решениями можно реализовать данную функцию ? Если, теоретически )), возможно изучить определенные разделы javascript, которые помогут мне сделать это самостоятельно, то прошу дать правильную наводку, время у меня есть, учусь я быстро :haha: . Или же, возможно, существуют какие-то готовые решения ?
Я понимаю, что вся тема детский сад, но деваться некуда, работа должна быть выполнена).
Спасибо!

Фигуры рисовать можно в виде SVG, окна с описанием поместить в тот же SVG но установить стиль `display:none`, на событие mouseover вешаем обработчик
устанавливающий `display:block`, а на mouseout обратно `display:none` для описания. Описание должно быть внутри самой фигуры чтобы события срабатывали
корректно. Собственно фигура должна представлять собой отдельный <svg:g/> с графикой.
Что надо почитать:
* что такое SVG и как его поместить в HTML
* как работать с CSS, конкретно display
* что такое события и как их обрабатывать
Так же может понадобится SVG-редактор, но не обязательно.
Как и откуда брать данные и как их преобразовывать в SVG зависит от того как сделан сайт.

Сайт сделан по шаблону в 1с-битрикс. Пользователи (уникальные посетители с доступом).
Возможности распределяются банально:
Админ - загружает фотки и редактирует наименования с датами.
Пользователи только смотрят.