главная

Теги:


Создаем панели инструментов и навигации для изображения

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

Результат наших действий будет иметь вид:

Мы создадим панель инструментов с иконками действий и панель навигации с дополнительной информацией об изображении. Также мы будем использовать JavaScript (jQuery) для того, чтобы обеспечить появление/скрытие панелей в процессе просмотра.

1. Структура HTML

Нам нужно три основных элемента в контейнере:

1. Верхняя панель инструментов с 8 иконками действий.
2. Панель навигации с двумя иконками и тегом дополнительной информации.
3. Изображение.

Верхняя панель инструментов является неупорядоченным списком:

Панель навигации - простой элемент div:


Поместим все в один контейнер и добавим изображение:

example

2. CSS

Теперь добавим стили для элементов HTML структуры. Контейнер изображения должен выглядеть как рамка с легкой тенью. Для него используется тень CSS3, которая не выводится в IE, но отлично выглядит в современных браузерах. Стили для контейнера будут иметь вид:

.image_container{
 width:500px;
 height:375px;
 padding:5px;
 background-color:#f7f7f7;
 border:1px solid #ccc;
 -moz-box-shadow: 0 1px 3px #777;
 -webkit-box-shadow: 0 1px 3px #777;
 margin:40px auto;
}

Изображение в примере имеет ширину 500px и высоту 375px, поэтому мы делаем размеры контейнера такими же. Для эффекта вместе с рамкой используется цвет фона и небольшой отступ. Таким образом, к изображению добавляются две рамки: одна создается за счет отступа, а другая командой border.

С помощью установки правого и левого полей в значение auto, мы центрируем div на странице. Порядок следования параметров для правила CSS: ВЕРХ СПРАВА НИЗ СЛЕВА. Если используется только два значения: ВЕРХ+НИЗ СПРАВА+СЛЕВА.

Теперь зададим стили для неупорядоченного списка иконок.

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

ul.toolbar{
 position:absolute;
 width:500px;
 height:52px;
 margin:0px;
 padding:0px;
 background-color:#fff;
 border-bottom:2px solid #ccc;
 list-style-type:none;
}

При задании стилей для списков надо помнить о том, что они имеют отступы и поля по умолчанию. В нашем примере отступы и поля в списке не нужны, поэтому их надо установить в 0. Свойство list-style-type должно быть установлено в значение none, так как никаких отметок пунктов списка выводить не нужно.

Теперь установим пункты списка в линию:

ul.toolbar li{
 display:inline;
}

При кодировании CSS всегда хочется написать компактные классы и избежать повторений кода. Все наши элементы a в нашем списке имеют разные иконки, поэтому нужно создать различные классы для них. Но они также имеют много общих свойств. Поэтому первым шагом мы определяем общие свойства:

ul.toolbar li a{
 float:left;
 cursor:pointer;
 width:70px;
 height:52px;
 opacity: 0.6;
}

Иконки являются квадратами со стороной 48px, но мы делаем кнопки чуть-чуть больше. При задании стилей для элементов ссылки нужно помнить, что курсор мыши меняется на изображение маленькой руки.В нашем случае мы хотим оставить курсор без изменений, поэтому устанавливаем свойство cusor:pointer;. Также иконки должны быть немного прозрачными, поэтому мы устанавливаем для них opacity:0.6;. Но когда над иконками проходит курсор мыши, они становятся полностью непрозрачными:

ul.toolbar li a:hover{
 opacity: 1.0;
}

Теперь определим классы для иконок:

a.label{
 background:#fff url(icons/label.png) no-repeat center center;
}
a.fav{
 background:#fff url(icons/favorite.png) no-repeat center center;
}
a.shop{
 background:#fff url(icons/shopping_cart.png) no-repeat center center;
}
a.zoomin{
 background:#fff url(icons/zoom_in.png) no-repeat center center;
}
a.zoomout{
 background:#fff url(icons/zoom_out.png) no-repeat center center;
}
a.fullscreen{
 background:#fff url(icons/fullscreen.png) no-repeat center center;
}
a.info{
 background:#fff url(icons/info.png) no-repeat center center;
}
a.edit{
 background:#fff url(icons/edit.png) no-repeat center center;
}

Это были стили для верхней панели инструментов.

Элемент навигации будет иметь схожие стили:

.navigation{
 width:500px;
 height:52px;
 position:absolute;
 margin-top:-58px;
 border-top:2px solid #ccc;
 background-color:#fff;
}

Свойство margin-top имеет отрицательное значение потому, что нам нужно вытянуть панель навигации поверх изображения.

Две стрелки для навигации будут иметь следующие стили:

a.previous{
 float:left;
 background:#fff url(icons/prev.png) no-repeat center center;
}
a.next{
 float:right;
 background:#fff url(icons/next.png) no-repeat center center;
}

Так как элементы имеют такие же стили, как и элементы а верхней панели инструментов, мы просто добавим класс к уже существующему коду CSS:

span.price{
 position:absolute;
 color:#888;
 font-weight:bold;
 font-size:26px;
 margin:10px 0px 0px 140px;
}

Тег для дополнительной информации будет иметь следующие стили:

span.price{
 position:absolute;
 color:#888;
 font-weight:bold;
 font-size:26px;
 margin:10px 0px 0px 140px;
}

Поля при абсолютном позиционировании элемента позволяют размещать в нужной позиции его относительно контейнера. Использование свойств top или left будет позиционировать элемент относительно страницы.


3. JavaScript

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

Для достижения данного эффекта мы будем использовать jQuery. Сначала добавим стиль для другого класса, чтобы сделать его элементы прозрачными:

.transparent{
 opacity: 0.6;
}

Добавим данный класс к панелям навигации и инструментов. Дополнительно добавим стиль, который сделает эти элементы невидимыми:

example

Так как мы будем использовать JavaScript для работы с элементами, то им надо задать ID:

example

В заголовке документа надо определить ссылку на библиотеку jQuery:


И, наконец, вставим код нашего скрипта перед закрывающим тегом body:

 

Мы определяем, что панели инструментов и навигации выскальзывают очень быстро (за 200 миллисекунд), как только курсор мыши оказывается над картинкой. А как только курсор мыши оказывается над элементом, то тот становится непрозрачным (удаляется класс transparent).


Готово!
 

Источник урока: tympanus.net/codrops/2009/11/23/css-tutorial-image-with-toolbar-navigation-overlay/

Урок Создан:2011-02-07 Просмотров:2214

Добавить комментарий:


Copyright© 2009 Hosted by Zhost