Создание оверлея <div>, который остается на месте после изменения масштаба с использованием только HTML-CSS

Question

Я работаю над сайтом с картинной галереей. Идея дизайнера заключалась в том, чтобы сделать кнопки, которые переключают фотографии, чуть выше фотографий.

Как это

Пример http://img57.imageshack.us/img57/1253/showq.png

В настоящее время я разработал решение javascript для этого - он получает положение фотографии и применяет абсолютное позиционирование к кнопкам div. Есть некоторые недостатки - он работает нестабильно в Opera и IE. Также мне пришлось сделать несколько грязных хаксов, чтобы они оставались на месте после увеличения. Интересно, есть ли лучший способ сделать это, желательно без javascript.

Answer 1

Популярная техника - разделить изображение на две огромные (в основном прозрачные) ссылки. Левая половина фотографии приведет вас к предыдущему изображению, а справа - к следующему.

Конечно, вы располагаете изображения кнопок соответствующим образом, и они будут перемещаться, но я предполагаю, что проблема, которую вы обнаруживаете, заключается в том, что вам нужно постоянно перемещать мышь, чтобы пролистывать множество изображений при перемещении кнопок .... Ну, с этой идеей, вам нужно только держать мышь ближе к середине, и она должна оставаться над фотографией (и, следовательно, направление).

Пример: http://gizmodo.com/photogallery/dreamhomespshop/1008251500

Наведите курсор мыши на изображение, и вы увидите, что оно активно по всему пути. Я уверен, что не совсем так, как ваша реализация, но концепция применима.

Answer 2

Вы имеете в виду, как здесь ? (голландский веб-сайт, см. браузер фотографий в центральной колонке вверху)

Масштабирование браузера отлично работает в браузерах, таких как Firefox и Safari, поскольку они масштабируют весь контент и записывают значения пикселей. Чтобы масштабирование работало в ie (6), вам нужно стилизовать все в em. Но в любом случае масштабирование в браузере дерьмово для пиксельных данных…

Абсолютное расположение кнопок (слева 0 и справа 0) не является проблемой, если элемент контейнера расположен относительно.

Answer 3

Если я правильно вас понимаю, вы пытаетесь расположить эти стрелки по центру относительно изображения. Это довольно легко сделать только с помощью CSS (JavaScript не требуется). Вот пример .

Основная идея заключается в том, что вы используете пару делений плюс некоторое абсолютное / относительное позиционирование. Есть внешний div, который опускает верхнюю часть всего объекта в центр родительского элемента, а затем внутренний div, который вытягивает ваш контент так, чтобы контент был центрирован, а не верх элемента.