Как работают спрайты?

@~~Dimania~~ · 21.07.2014, 09:12. **Просмотров** 1249. **Ответов** 3

Доброе время суток! помогите пожалуйста разобраться как работают спрайты?, Допустим у меня есть выпадающее меню на сайте, и перед словом меню у меня есть стрелочка показывающая вниз, а при наведении на нее, я хочу чтобы она показывала вверх. Я то так уже сделал с помощью css и двух отдельных картинок, но когда страница сайта только открылась и я навожу на эту стрелочку то новая стрелочка появляется с замедлением(прогружается) а потом нормально. Можно ли это исправить с помощью спрайтов? Или я может не понял что такое спрайт?

Весьма спасибо!

@Вова101 · 21.07.2014, 09:41

Здравствуйте, итак, спрайт это картинка из множества других маленьких картинок. То есть, вы задаете один и тот же спрайт как беграунд для обеих ваших картинок а также, вы еще должны задать background-position для ваших стрелочек. Например (вы должны знать где находится ваша стрелочка на картинке в пикселях, сколько пикселей от верхнего левого угла спрайта сверху и снизу):

CSS

.arrow1{
    Background-image: url(../images/sprite.png);
    Background-position: 0 0;
}
 
.arrow_2{
    Background-image: url(../images/sprite.png);
    Background-position: 20px 20px;
}

@Crystal-3 · 21.07.2014, 11:12

Сообщение от Dimania

Можно ли это исправить с помощью спрайтов?

Конечно, в вашем случае нужен именно спрайт.
Один из плюсов спрайтов: нет задержек при использовании :hover.
Могу посоветовать вам генератор для создания спрайтов http://csssprites.com/
Очень удобный, выводит код CSS для каждого изображения.

@killlfun · 21.07.2014, 11:26

Dimania, чтем полезную статью и радуемся.

Как работают спрайты?

Решение

Решение

@~~Dimania~~ Заблокирован
		1
	Как работают спрайты? 21.07.2014, 09:12. Просмотров 1249. Ответов 3 Метки нет (Все метки) Доброе время суток! помогите пожалуйста разобраться как работают спрайты?, Допустим у меня есть выпадающее меню на сайте, и перед словом меню у меня есть стрелочка показывающая вниз, а при наведении на нее, я хочу чтобы она показывала вверх. Я то так уже сделал с помощью css и двух отдельных картинок, но когда страница сайта только открылась и я навожу на эту стрелочку то новая стрелочка появляется с замедлением(прогружается) а потом нормально. Можно ли это исправить с помощью спрайтов? Или я может не понял что такое спрайт? Весьма спасибо! 0

@Crystal-3 93 / 80 / 49 Регистрация: 04.04.2014 Сообщений: 260
	21.07.2014, 11:12	3
	Сообщение было отмечено Taatshi как решение Решение Сообщение от Dimania Можно ли это исправить с помощью спрайтов? Конечно, в вашем случае нужен именно спрайт. Один из плюсов спрайтов: нет задержек при использовании :hover. Могу посоветовать вам генератор для создания спрайтов http://csssprites.com/ Очень удобный, выводит код CSS для каждого изображения. 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	21.07.2014, 11:26	4
	Сообщение было отмечено Dimania как решение Решение Dimania, чтем полезную статью и радуемся. 1

Опции темы