В данном примере, мы возьмём за основу списки, в ячейки которых поместим ссылку на модуль вашего сайта и пропишем ссылкам нужный класс.
HTML-Code
<ul id="osnova_sprite">
<li class="sprite_css"><a class="forum" title="Наш форум" target="_blank" href="#"></a></li>
<li class="sprite_css"><a class="gallery" title="Наша галерея" target="_blank" href="#"></a></li>
<li class="sprite_css"><a class="email" title="Обратная связь" target="_blank" href="#"></a></li>
</ul>
В стилях списка, убираем символы в начале изображений и ставим отступы между ними в 5 пикселей
CSS-Code
#osnova_sprite {
list-style-type:none; /* Убираем символы в начале текста */
}
.sprite_css {
padding-bottom: 5px; /* Внутренний нижний отступ */
}
Дальше прописываем основной размер изображения в ячейках li, у нас 200x65 пикселей, и запрещаем данному изображению повторяться
CSS-Code
.sprite_css a {
display:block; /* Элемент показывается как блочный */
width:200px; /* Ширина ячейки */
height:65px; /* Высота ячейки */
background:url(osnova_sprite.jpg); /* Указываем ссылку на картинку фона */
background-repeat:no-repeat; /* Картинку не повторять */
}
Теперь прописываем каждому стилю ссылки (forum, gallery, email) background-position, который уходит в минус с каждым изображением
CSS-Code
/* меняем позицию отображение участка картинки */
.sprite_css a.forum {background-position:0px 0px; }
.sprite_css a:hover.forum {background-position:0px -65px;}
.sprite_css a.gallery {background-position:0px -130px;}
.sprite_css a:hover.gallery {background-position:0px -195px;}
.sprite_css a.email {background-position:0px -260px;}
.sprite_css a:hover.email {background-position:0px -325px;}
И теперь после того, как вы наведёте стрелку мышки на нужную вам чёрно белую картинку, она сразу станет цветной.
А теперь давайте посмотрим на весь код
HTML-Code
<ul id="osnova_sprite">
<li class="sprite_css"><a class="forum" title="Наш форум" target="_blank" href="#"></a></li>
<li class="sprite_css"><a class="gallery" title="Наша галерея" target="_blank" href="#"></a></li>
<li class="sprite_css"><a class="email" title="Обратная связь" target="_blank" href="#"></a></li>
</ul>
CSS-Code
/* css спрайты 2
------------------------------------------*/
#osnova_sprite {
list-style-type:none; /* Убираем символы в начале текста */
}
.sprite_css {
padding-bottom: 5px; /* Внутренний нижний отступ */
}
.sprite_css a {
display:block; /* Элемент показывается как блочный */
width:200px; /* Ширина ячейки */
height:65px; /* Высота ячейки */
background:url(http://ucoz-helper.ucoz.com/HTML-CSS/osnova_sprite.jpg); /* Указываем ссылку на картинку фона */
background-repeat:no-repeat; /* Картинку не повторять */
}
/* меняем позицию отображение участка картинки */
.sprite_css a.forum {background-position:0px 0px; }
.sprite_css a:hover.forum {background-position:0px -65px;}
.sprite_css a.gallery {background-position:0px -130px;}
.sprite_css a:hover.gallery {background-position:0px -195px;}
.sprite_css a.email {background-position:0px -260px;}
.sprite_css a:hover.email {background-position:0px -325px;}
Вот такой не сложный вариант CSS спрайта
11:40
