Разработка интерактивного веб-каталога: поиск оптимального решения

Я работаю в сфере подбора запчастей и располагаю каталогами производителей в форматах PDF и Excel. Имея в прошлом опыт программирования, я хочу перенести эти данные в веб-формат для саморазвития. Простое отображение картинок со списком деталей - не цель. Мне нужна интерактивность, аналогичная примеру по ссылке (скриншот прилагался), где элементы каталога «оживают».

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

Ключевые вопросы и технические соображения

Я заметил, что во многих веб-каталогах интерактивные зоны реализованы через позиционированные HTML-элементы (DIV) поверх статичного изображения. Это наводит на несколько вопросов:

  • Процесс создания: Неужели разметку всех зон вручную делают? Это вариант, но хочется найти более эффективный подход.
  • Современные технологии: Стоит ли рассматривать более продвинутые варианты, например, HTML Canvas или карты изображений (image map)? Какой подход будет более гибким и современным?

Формулировка задачи для экспертов

Мне не нужна пошаговая инструкция - я хочу разобраться сам. Однако мне необходима помощь в выборе вектора развития. Пожалуйста, поделитесь вашим мнением по следующим пунктам:

  1. Готовые решения: Существуют ли специализированные программы или конструкторы (аналоги «Автокада», но для веба), позволяющие относительно просто создавать такие интерактивные каталоги?
  2. Разработка с нуля: Если писать систему самостоятельно, на какие технологии и инструменты стоит обратить внимание в первую очередь?
  3. Общий алгоритм: Как бы вы в общих чертах решили эту задачу с помощью выбранных инструментов? (Достаточно поверхностного описания концепции).

Буду благодарен за любые советы, которые помогут мне определить направление для изучения и реализации проекта.