Вы знаете что есть такой напиток Спрайт от компании Кока-кола? Замечательно, а о CS спрайтах слышали?
Так вот, тут о другом =)
Так что же такое Спрайт? Спрайт - это несколько картинок объединенных в одно целое изображение. Используются спрайты в сайтостроении
для более быстрой загрузки сайта.
А вот, какое определение дает css спрайтам wikipedia:
Quote
Спрайт (англ. Sprite — фея; эльф) — графический объект в компьютерной графике.
Чаще всего — растровое изображение, свободно перемещающееся по экрану.
Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. То есть легче всего воспринимать спрайт как перемещающуюся в пространстве проекцию какого-то объёмного тела так, что разница незаметна.
Для начала нам нужно нарисовать спрайт. Если сами не умеете пользоваться графическими редакторами, то можете
воспользоваться онлайн сервисом.
Я нарисовал такое:
Вверху это кнопки в обычном состоянии. Внизу - когда наводишь на кнопки мышкой.
А вот какой я соорудил код для нее:
Code
#wellon {background-image:url(http://wellon.3dn.ru/welloncsssprite.jpg); width:80px; height:40px;
display:block;
background-position:top left; float:left
}
#wellon:hover {background-image:url(http://wellon.3dn.ru/welloncsssprite.jpg); width:80px; height:40px;
display:block;
background-position:bottom left;
}
-
А теперь разъясню что есть что
-
Code
#wellon {
background-image:url(http://wellon.3dn.ru/welloncsssprite.jpg); <!-- Сам спрайт -->
width:80px; <!-- ширина -->
height:40px; <!-- высота -->
display:block;
background-position:top top; <!-- кусочек кода шириной 80 высотой 40 сверху внизу -->
float:left <!-- чтобы ссылки были слева в одну строчку -->
}
#sprite:hover {background-image:url(http://wellon.3dn.ru/welloncsssprite.jpg); width:80px; height:40px;
display:block;
background-position:top top; <!-- кусочек кода шириной 80 высотой 40 сверху внизу -->
}
Можно иначе немного:
Code
.wellon { background-image:url(http://wellon.3dn.ru/welloncsssprite.jpg); width:80px; height:40px; display:block; background-position:0 0;}
.wellon:hover { background-image:url(http://wellon.3dn.ru/welloncsssprite.jpg); width:80px; height:40px; display:block; background-position:0 -40px;}
Code
background-position:0 0;
background-position:0 -25px;
Если в первом случае мы здесь писали словами left, top, bottom, right, то здесь это можно сказать тоже самое только в цифрах.
первое число - это смещение от точки по оси X, второе число по Y. Все помнят из школьного курса математики ось XY. Так вот это оно и есть.
В первом коде мы ничего не трогаем 0 0, а при наведении смещаем по оси Y вниз на 25px.
Вот мы написали строчки в css. А как же вставить это все в html ?
Делается это так:
Для первых
Code
<a href="/" id='wellon'></a>
для вторых
Code
<a href="/" class='wellon'></a>
