Как расположить объекты в системе координат XY внутри блока?

Question

[Андрей Енькин]

Есть схема водоема, как на картинке. Есть объекты и\или группы объектов, каждый с координатами по Х (один из параметров объекта) и Y (глубина). Объекты надо расположить на схеме, и обрабатывать события по клику\наведению мыши - показывать блоки со ссылками, названиями и т.п. Двигать - не нужно. Просматривать на телефоне как обычную страницу сайта - нужно.
Техническая часть вопроса - на чем эту радость делать? Есть ли готовые или похожие решения на JQuery & HTML5 ? Как описанное может называться по-английски, чтоб гуглить? По-русски, кстати, тоже ничего кроме слова «диаграмма» не приходит в голову. Flot, Highcharts уже нашел, но допилить их под задачу не представляю как.

Answer 1

[Алексей Павлов]

<span class="object" style="left: 20%; top: 45.6%;"></span>

.object {position: relative;} /* а можно и absolute */

И дальше в js управлять свойствами left и top. А, вам не нужно менять положение - тем проще.

Возможно, если много объектов, то перейти на использование canvas.
Посмотрите на Fabric.js (есть статьи на хабре: один и два)

Answer 2

[Вячеслав]

Ну, раз их не нужно двигать и они сами не двигаются (нет никакой динамики), можно схитрить и сделать все это одним изображением, на которое сверху наложить невидимые блоки на каждый объект.
Если хотите сложнее и лучше - возможно, canvas через какую-нибудь библиотеку для работы с ним.