Эффект лупы
Параметры CSS весьма удобны для придания эффектного внешнего вида сайту, но наличие псевдоклассов, особенно :hover дает возможно оживлять сайт руками пользователя. Кроме меню интересным приложением является эффект лупы. Дело в том, что при показе картинок можно указывать размер картинки и браузер автоматически масштабирует картинку на этот размер. Но можно заказать разные размеры в зависимости от того, находится ли курсор мыши над картинкой или нет. Скажем у вас 4 картинки относительно большого размера. Они занимают много места на сайте, если их выставить в таблицу. Но можно выставить их уменьшенные копии и показывать натуральную величину картинки только а момент ее активации, двигая курсор мыши в область картинки. В этот момент она мгновенно принимает свои натуральные размеры. Таким образом можно видеть все картинки в натуральную величину без перезагрузки страницы, и в то же время исходно место на сайте экономится. Эффект лупы можно организовать и с помощью языка javascript, причем десятками разных способов. Но интересно, что различными способами это можно сделать и не используя javascript. В данном примере я рассмотрю самый простейший вариант, чтобы просто показать идею. В реальной жизни можно придумать очень много вариантов на любой вкус. Напомню, что псевдокласс :hover не работает в версиях браузера Интернет Экплорер ниже 8, его надо заменять другим кодом. Но можно просто попросить сменить браузер.
Как обычно, я сначала покажу полный код сайта, содержащего меню, а потом расскажу что этот код означает. Код можно скопировать в отдельный файл и посмотреть. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь я объясню пример. Первые теги достаточно очевидны. В теге <style> записаны параметры тегов и классов. В этом примере тег body пустой, а цвет фона задан с помощью CSS. Область сайта имеет id="main" и тоже задана стандартным образом. А единственный класс im задан в двух вариантах: обычном и с псевдоклассом hover. В обычном классе заданы поля, окружающие картинку и размеры картинки. В старой версии HTML для тега img есть серия параметров, таких как width, height, hspace, vspace. Но последние два использовать не рекомендуют, а размеры картинки можно задать двумя способами, но CSS в любом случае предпочтительнее. В классе im:hover меняются размеры картинки и на всякий случай указывается высоеок значение z-индекса. Но в данном примере это не используется, потому что позиционирования по абсолютным координатам нет. Но его можно сделать в другом варианте. А в теле сайта просто стоят 4 картинки, для которых указаны только адреса в интернете, и которые поставлены по 2 на строку. Как видим код исключительно простой.
Конечно при комбинации такого кода с другими объекстами на сайте его возможно придется модифицировать и сделать более гибким. Но он и так неплохо работает. Как это работает легко понять рассмотрев пример. Неудобство этого кода в том, что он раздвигает размеры объекта при увеличении картинки. А удобство в том, что большая картинка не закрывает остальные. Код настолько прост, что больше просто нечего сказать. Некоторые модификации данной идеи будут рассмотрены в других статьях.
Автор: Виктор Кон, 9.09.2013
