Изображение спрайт
Изображение-спрайт это коллекция изображений, содержащяяся в одном изображении.
Веб-страница с большим количеством изображений может занять много времени для загрузки и генерирует несколько запросов серверу.
Использование изображений спрайтов уменьшит количество серверных запросов и сэкономит трафик.
Изображение спрайт - Простой пример
Вместо использования трех отдельных изображений, мы используем это одно изображение ("img_navsprites.gif"):
С помощью CSS, можно показать, только часть изображения, которое нам нужно.
В следующем примере CSS определяет, какие части изображения "img_navsprites.gif" показать:
Пример 1
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
img.home { width:46px; height:44px; background:url(/images/img_navsprites.gif) 0 0; }
img.next { width:43px; height:44px; background:url(/images/img_navsprites.gif) -91px 0; }
</style>
</head>
<body>
<img class="home" src="/images/img_trans.gif" width="1" height="1" /><br /><br />
<img class="next" src="/images/img_trans.gif" width="1" height="1" />
</body>
</html>
Объяснение примера:
<img class="home" src="/images/img_trans.gif" />- Определяет только небольшой прозрачный рисунок, так как атрибутsrcне может быть пустым. Отображаемое изображение будет фоновым изображением, указываем в CSS- width:46px; height:44px; - Определяет часть изображения, которое мы хотим использовать
- background:url(/images/img_navsprites.gif) 0 0; - Определяет фоновое изображение и его положение (слева 0px, сверху 0px)
Это самый простой способ использования изображений-спрайтов, теперь мы хотим расширить использование с помощью эффекта ссылок и наведения.
Изображение спрайт - создание списка навигации
Мы хотим использовать изображение-спрайт ("img_navsprites.gif") для создания списка навигации.
Мы будем использовать список HTML, потому что он может быть ссылкой, а также для поддержки фонового изображения:
Пример 2
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
#navlist{ position:relative; }
#navlist li{ margin:0; padding:0; list-style:none; position:absolute; top:0; }
#navlist li, #navlist a{ height:44px; display:block; }
#home{ left:0px; width:46px; }
#home{ background:url('/images/img_navsprites.gif') 0 0;}
#prev{ left:63px; width:43px; }
#prev{ background:url('/images/img_navsprites.gif') -47px 0; }
#next{ left:129px; width:43px;}
#next{ background:url('/images/img_navsprites.gif') -91px 0; }
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="#"></a></li>
<li id="prev"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
</body>
</html>
Объяснение примера:
- #navlist{ position:relative; } - позиция установленна на относительную, позволяющюю осуществлять абсолютное позиционирование внутри
- #navlist li{ margin:0; padding:0; list-style:none; position:absolute; top:0; } - поля и заполнение установлены в 0, стиль списка удален, и все элементы списка являются абсолютно-позиционируемыми
- #navlist li, #navlist a{ height:44px; display:block; } - высота всех изображений 44px
Теперь начнем позиционирование и стилизацию для каждой конкретной части:
- #home{ left:0px; width:46px; } - Расположем все в крайнее левое положение, и ширина изображения - 46px
- #home{ background:url(img_navsprites.gif) 0 0; } - Определяет фоновое изображение и его положение (слева 0px, сверху 0px)
- #prev{ left:63px; width:43px; } - Расположенно 63px вправо (#home ширина 46px + некоторое дополнительное пространство между элементами), и ширина 43px.
- #prev{ background:url('img_navsprites.gif') -47px 0; } - Устанавливает фоновое изображение 47px вправо (#home ширина 46px + 1px линия разделения)
- #next{ left:129px; width:43px; }- Расположенно 129px вправо (началом #prev является 63px + #prev ширина 43px + дополнительное расстояние), и ширина 43px.
- #next{ background:url('img_navsprites.gif') no-repeat -91px 0; } - Устанавливает фоновое изображение 91px вправо (#home ширина 46px + 1px линия разделения + #prev ширина 43px + 1px линия разделения )
Изображение спрайт - Эффект наведения
Теперь мы хотим добавить эффект наведения для нашего списка навигации.
Наше новое изображение ("img_navsprites_hover.gif") содержит три навигационных изображения и три изображения, используемых для эффектов наведения:
Потому что это одно изображение, а не шесть отдельных файлов, не будет задержки загрузки, когда пользователь наводит курсор на изображение.
Мы только добавили три строки кода, чтобы добавить эффект наведения:
Пример 3
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
#navlist{ position:relative; }
#navlist li{ margin:0; padding:0; list-style:none; position:absolute; top:0; }
#navlist li, #navlist a{ height:44px; display:block; }
#home{ left:0px; width:46px; }
#home{ background:url('/images/img_navsprites.gif') 0 0;}
#home a:hover{ background: url('/images/img_navsprites_hover.gif') 0 -45px; }
#prev{ left:63px; width:43px; }
#prev{ background:url('/images/img_navsprites.gif') -47px 0; }
#prev a:hover{ background: url('/images/img_navsprites_hover.gif') -47px -45px; }
#next{ left:129px; width:43px;}
#next{ background:url('/images/img_navsprites.gif') -91px 0; }
#next a:hover{ background: url('/images/img_navsprites_hover.gif') -91px -45px; }
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="#"></a></li>
<li id="prev"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
</body>
</html>
Объяснение примера:
- Так как элемент списка содержит ссылку, мы можем использовать псевдо-класс :hover
- #home a:hover{ background: transparent url(/images/img_navsprites_hover.gif) 0 -45px; } - Для всех трех изображений наведения зададим тоже положение фона, только 45px дальше вниз
Была ли эта информация полезной?
