Веб-страница с несколькими изображениями масштабируется одинаково - как реализовать?

Question

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

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

I.e. начальная страница может выглядеть следующим образом с исходным изображением на вершине:

Затем я наведите курсор мыши на исходном изображении, увеличить путем поворота колесика мыши и перетащить его немного в области интереса, так что теперь я могу увидеть что-то вроде этого:

Ну, вот и все. Мне не нужны какие-либо симпатичные анимации или предварительные предварительные просмотры marquee. Это просто прагматичная задача. Я думаю, есть десятки способов сделать это, но что это самый простой способ сделать это для новичка?

Спасибо. Может быть, этот вопрос должен был быть размещен на каком-то другом сайте, более связанном с веб-программированием? Совет о том, где разместить его, будет приветствовать.

Answer 1

Я думаю, вам нужно использовать JS с CSS-трюками (JS для управления CSS).

Например, увеличьте изображение с помощью параметров widht \ height (CSS \ HTML), затем установите точку обзора с использованием отрицательных полей (CSS), а затем обрезайте изображение с помощью переполнения: скрытый на div, обернутый вокруг изображения.

Я могу порекомендовать вам использовать jQuery.

• Вы можете использовать его для работы с изображениями (http://api.jquery.com/animate/)

• Вы можете использовать его для отслеживания мыши (http://docs.jquery.com/Tutorials: Mouse_Position) и прокрутка (http://api.jquery.com/scroll/) для интерактивного масштабирования

• Также легко манипулировать CSS с помощью метода .css (http://api.jquery.com)./css /)

Пример http://cs.scaytrase.ru/image_clip.html

Вы можете управлять изображениями с помощью .clipin значения класса (клип, верхней и покинул), чтобы установить окно просмотра и images` ширина и высота параметры для настройки масштабирования

Левые thumbnailes являются 4x увеличены правая картинка (ориг 1280x1024, увеличенной в 500px на месте)

Размер снимков, контролируемых с помощью общего .clipout класс

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