Как делать спрайты?

@Zver6233 · Регистрация: 21.06.2013

Author24 — интернет-сервис помощи студентам

Наведите пример кода со спрайтами, тока полноценный, а то пользуюсь сервисами онлайн для создания спрайтов. А как вставлять CSS код вместо картинки не знаю.
По возможности дайте наработку кода такого кода: картинка грузиться маленькой, а при щелчку по ней - увеличивается.(В окне)

@fol · 21.01.2014, 22:18

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

вставлять CSS код вместо картинки

это как?

технология спрайтов, по сути, заключается в различном расположении одной картинки (на которой находятся все картинки) относительно видимой части объекта. вот тут подробно рассказано

@Zver6233 · 22.01.2014, 04:26 **[ТС]**

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

это как?

Например: для установки БГ я точно знаю путь к картинки, а как мне узнать адрес части этой картинки (типа спрайта).

Добавлено через 1 минуту
Или я не правильно понимаю значения слова спрайт? Это не часть большой картинки?

@Academik · 22.01.2014, 04:39

Все верно, это часть большой (или не очень) картинки, при всем при этом показывается только ее часть.
Допустим у нас есть спрайт 100х200px где расположены две картинки по вертикали 100х100. Мы решили показать первую (верхнюю) картинку, наш код будет примерно таким:

CSS

1	.block{width: 100px; height:100px; background: url('image.jpg') 0 0 no-repeat;}

То есть мы показываем только часть картинки. Плюс в том, что браузер подгружает всего одну картинку и тут же кэширует ее, при последующем обращении к странице загрузка ее занимает значительно меньше времени, чем если бы мы опять же подгружали 2-10 картинок...

Если решили показать другую часть этого же спрайта, то нам нужно поменять только координаты (позиционирование):

CSS

1	background: url('image.jpg') 0 -100px no-repeat;

Добавлено через 6 минут
Тут можно почитать http://balbesof.net/article/a-143.html

@newJS · 22.01.2014, 07:00

вот примеры с готовыми картинками
Спрайты
Использование спрайтов в js
Углы по старинке
Выдвижная ссылка
Использования частей изображения

@Zver6233 · 22.01.2014, 15:37 **[ТС]**

HTML5

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sp</title>
<link href="pictures/sprite/sprites.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div class=sprite></div>
 
</body>
</html>

почему не работает такой код?
когда вставляю полный код css в хед. Работает.
Пути указаны верно

@newJS · 22.01.2014, 20:59

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

когда вставляю полный код css в хед. Работает

наверно потому что для внешнего css-файла путь к картинке может быть другим, если файлы html и css лежат не в одной папке

@Zver6233 · 22.01.2014, 21:54 **[ТС]**

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

наверно потому что для внешнего css-файла путь к картинке может быть другим, если файлы html и css лежат не в одной папке

и что нужно предпринять?

@newJS · 23.01.2014, 06:10

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

и что нужно предпринять?

Путь исправить.

@Alorian · 23.01.2014, 08:08

http://verstaem.com/markup/css-sprites/
По ссылке пример для спрайта с иконками, пример для спрайта с градиентами .
И длинные объяснения про спрайты вообще.

@Zver6233 · 23.01.2014, 12:09 **[ТС]**

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

Путь исправить.

Пробовал не помогло.

@newJS · 23.01.2014, 21:33

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

Пробовал не помогло.

тогда архивом выложи свои файлы

Добавлено через 19 секунд

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

Пробовал не помогло.

тогда архивом выложи свои файлы

@Zver6233 37 / 37 / 18 Регистрация: 21.06.2013 Сообщений: 271 Записей в блоге: 1
	23.01.2014, 12:09 [ТС]	11
	Сообщение от newJS Путь исправить. Пробовал не помогло. 0

@Zver6233 37 / 37 / 18 Регистрация: 21.06.2013 Сообщений: 271 Записей в блоге: 1
		1
	Как делать спрайты? 21.01.2014, 21:58. Показов 1732. Ответов 11 Метки нет (Все метки) Наведите пример кода со спрайтами, тока полноценный, а то пользуюсь сервисами онлайн для создания спрайтов. А как вставлять CSS код вместо картинки не знаю. По возможности дайте наработку кода такого кода: картинка грузиться маленькой, а при щелчку по ней - увеличивается.(В окне) 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	21.01.2014, 22:18	2
	Сообщение от Zver6233 вставлять CSS код вместо картинки это как? технология спрайтов, по сути, заключается в различном расположении одной картинки (на которой находятся все картинки) относительно видимой части объекта. вот тут подробно рассказано 0

@Zver6233 37 / 37 / 18 Регистрация: 21.06.2013 Сообщений: 271 Записей в блоге: 1
	22.01.2014, 04:26 [ТС]	3
	Сообщение от fol это как? Например: для установки БГ я точно знаю путь к картинки, а как мне узнать адрес части этой картинки (типа спрайта). Добавлено через 1 минуту Или я не правильно понимаю значения слова спрайт? Это не часть большой картинки? 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	22.01.2014, 07:00	5
	вот примеры с готовыми картинками Спрайты Использование спрайтов в js Углы по старинке Выдвижная ссылка Использования частей изображения 1

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	22.01.2014, 20:59	7
	Сообщение от Zver6233 когда вставляю полный код css в хед. Работает наверно потому что для внешнего css-файла путь к картинке может быть другим, если файлы html и css лежат не в одной папке 0

@Zver6233 37 / 37 / 18 Регистрация: 21.06.2013 Сообщений: 271 Записей в блоге: 1
	22.01.2014, 21:54 [ТС]	8
	Сообщение от newJS наверно потому что для внешнего css-файла путь к картинке может быть другим, если файлы html и css лежат не в одной папке и что нужно предпринять? 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	23.01.2014, 06:10	9
	Сообщение от Zver6233 и что нужно предпринять? Путь исправить. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	23.01.2014, 08:08	10
	http://verstaem.com/markup/css-sprites/ По ссылке пример для спрайта с иконками, пример для спрайта с градиентами . И длинные объяснения про спрайты вообще. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	23.01.2014, 21:33	12
	Сообщение от Zver6233 Пробовал не помогло. тогда архивом выложи свои файлы Добавлено через 19 секунд Сообщение от Zver6233 Пробовал не помогло. тогда архивом выложи свои файлы 0