CSS или HTML: привязка или привязка к координатам изображения

Question

То, что я пытаюсь сделать, похоже на карту изображения - наоборот. У меня большое изображение (более 2000x2000) и вы хотите дать ссылки на координаты на изображении. На изображении есть элементы, которые я хотел бы, чтобы пользователи могли сразу перейти к сканированию всего изображения вручную. Возможно ли это с помощью CSS или HTML путем добавления ссылок на координаты или добавления якорей к изображению? Я бы использовал js, если бы это был вариант.

Answer 1

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

1. Вы можете рассматривать его как спрайт изображения, и использовать JavaScript/JQuery изменить координаты изображения таким образом, что точка изображения вы заинтересованы в движении к вверху слева от div, расположенного на странице. Но часть изображения выше и слева от этой точки не будет видна.

2. Вы можете определить его как фоновое изображение в div и определить невидимую таблицу или невидимые фиксированные позиции в этом div и привязать к определенным div или ячейкам в этом наложении. В этом случае координата y в изображении, где располагается элемент div или ячейка, вероятно, переместится в верхнюю часть окна браузера, но горизонтальное позиционирование будет проблематичным. Если div или ячейка, на которую вы нацелились, выключена с экрана вправо или влево, страница будет перемещаться, чтобы открыть ее, но я не уверен, что вы можете гарантировать, где будет расположена конкретная координата x. Кроме того, если цель находится около нижней части веб-страницы, эта целевая точка не будет перемещаться в верхнюю часть. Но для этого решения не требуется JavaScript/jQuery - это просто означает привязку к идентификаторам элементов на странице.

3. Это почти то же самое, что и # 2 ... Вы можете наложить изображение на divs и/или таблицу на более высоких уровнях z и связать их с этими divs или ячейками таблицы.

4. Вы можете использовать JavaScript/jQuery для размещения div с фиксированными размерами с видимыми границами, чтобы его верхний левый угол находился в позиции изображения, которое вас интересует. Я думаю, вам все равно придется ссылаться к этому div, чтобы убедиться, что он виден в текущем окне просмотра.

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