Интерактивная область background?

Question

[Alecxandrys]

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

spoiler

Каким образом ещё можно решить задачу?

Answer 1

[Stalker_RED]

SVG, например.
Простенькая демка (обработчики кликов легко можно добавить).
И есть куча библиотек для работы с SVG. Можно делать крутые штуки (прокрутите в конец статьи).

Вариант чуть попроще, но и с меньшими возможностями: HTML <map>+<area>
Пример: html.cita.illinois.edu/text/map/map-example.php