Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
Заблокирован
1

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

21.07.2014, 09:12. Просмотров 1249. Ответов 3
Метки нет (Все метки)


Доброе время суток! помогите пожалуйста разобраться как работают спрайты?, Допустим у меня есть выпадающее меню на сайте, и перед словом меню у меня есть стрелочка показывающая вниз, а при наведении на нее, я хочу чтобы она показывала вверх. Я то так уже сделал с помощью css и двух отдельных картинок, но когда страница сайта только открылась и я навожу на эту стрелочку то новая стрелочка появляется с замедлением(прогружается) а потом нормально. Можно ли это исправить с помощью спрайтов? Или я может не понял что такое спрайт?
Весьма спасибо!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.07.2014, 09:12
Ответы с готовыми решениями:

Как делать спрайты?
Наведите пример кода со спрайтами, тока полноценный, а то пользуюсь сервисами онлайн для создания...

Как рисуются спрайты?
Как создать простой 2д спрайт, на какой программе вы бы посоветовали это реализовать?

Как реализовать 2D спрайты?
Можно ли в средствами OpenGL создать изображение отдельно от кадрового буфера, привязанного к окну...

Как объединить спрайты?
Всем привет. Мне нужно было создать карту из блоков. Некоторые блоки представляют собой лес, я...

3
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
21.07.2014, 09:41 2
Здравствуйте, итак, спрайт это картинка из множества других маленьких картинок. То есть, вы задаете один и тот же спрайт как беграунд для обеих ваших картинок а также, вы еще должны задать background-position для ваших стрелочек. Например (вы должны знать где находится ваша стрелочка на картинке в пикселях, сколько пикселей от верхнего левого угла спрайта сверху и снизу):

CSS
1
2
3
4
5
6
7
8
9
.arrow1{
    Background-image: url(../images/sprite.png);
    Background-position: 0 0;
}
 
.arrow_2{
    Background-image: url(../images/sprite.png);
    Background-position: 20px 20px;
}
0
93 / 80 / 49
Регистрация: 04.04.2014
Сообщений: 260
21.07.2014, 11:12 3
Лучший ответ Сообщение было отмечено Taatshi как решение

Решение

Цитата Сообщение от Dimania Посмотреть сообщение
Можно ли это исправить с помощью спрайтов?
Конечно, в вашем случае нужен именно спрайт.
Один из плюсов спрайтов: нет задержек при использовании :hover.
Могу посоветовать вам генератор для создания спрайтов http://csssprites.com/
Очень удобный, выводит код CSS для каждого изображения.
0
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
21.07.2014, 11:26 4
Лучший ответ Сообщение было отмечено Dimania как решение

Решение

Dimania, чтем полезную статью и радуемся.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.07.2014, 11:26

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Подскажите как оптимальней использовать спрайты
Доброго времени суток, Камрады! У меня вопрос по все той же простенькой игре, продублирую скрин...

Как в unity ровно ставить спрайты
Надо чтоб спрайты перемещались в плотную к друг другу (они могут повторятся)

Как загрузить и вывести спрайты на поверхность DirectDraw?
Привет, друзья! Как можно загрузить и вывести спрайты на поверхность DirectDraw? Как можно...

Как присвоить фрагменты из цельной картинки в спрайты?
Давно не могу найти решения, как из цельной картинки присвоить фрагменты в спрайт (как это обычно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.