Прокеширование картинок

[inokentik 45]

Посоветовали сделать прокеширование картинок, чтобы они грузились одновременно, кто знает, что это означает?))

[WWW.ZEOS.IN 1 161]

css sprites

Вот тебе пример: http://a.zeos.in/sprites.html

Реально грузится одна картинка: http://a.zeos.in/sprites.png

Экономия и скорости и трафика и запросов к серверу (всегда два запроса)

[inokentik 45]

А не начучишь, как такое делать?)

[WWW.ZEOS.IN 1 161]

Так а ты посмотри исходный код html страницы, которую я дал. Там всё очень просто, если вникнуть

То-есть у меня есть 7 дивов (так как на картинке: http://a.zeos.in/sprites.png есть 7 разных элементов):

1) <div class="aaa bbb1"></div>

2) <div class="aaa bbb2"></div>

3) <div class="aaa bbb3"></div>

4) <div class="aaa bbb4"></div>

5) <div class="aaa bbb5"></div>

6) <div class="aaa bbb6"></div>

7) <div class="aaa bbb7"></div>

Каждому из них я делаю бэкграунд .aaa { background: url("sprites.png"); }

Потом для каждого дива я устанавливаю его фиксированную высоту и ширину ( для первого дива его ширина и высота: .bbb1 { background-position: 0px 0px; width: 38px; height: 39px; } , а узнал ширину и высоту замерив размеры элемента (того, где треугольник с знаком восклицания) в фотошопе. )

И после всего этого я меняю позицию бэкграунда ( по оси X и Y относительно ширины и высоты дива ), который назначил для каждого дива, в нужном направлении благодаря свойству: background-position: Xpx Ypx; ( для первого дива это: .bbb1 { background-position: 0px 0px; width: 38px; height: 39px; } )

Если что-то не понятно, то задавай вопросы. Попробую ответить

Есть конечно и генераторы CSS Sprites вроде http://csssprites.com/

Но советую ими не пользоваться, пока сам не разберёшься как это работает. Да и вручную делать лучше и надёжнее имхо

Изменено 23 марта 2011 пользователем WWW.ZEOS.IN

[inokentik 45]

Ага, спасибо. вечерком попробую вникнуть в то, что написанно =)

[inokentik 45]

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

[WWW.ZEOS.IN 1 161]

Не понял, про какие полоски идёт речь?

[WebSet 74]

Вот у меня на полоске будет куча картинок, а как указывать то чтоб какая то определенная вставлялась в нужное место??

Создать див класс с параметрами background-position: x y;

x и y - осы (помните уроки по математике) вот такая же система.

[inokentik 45]

ZEOS, уже ответил WebSet, смысл понял... А вот например так делать следует с картинками, которые ну там иконки, кнопки и тд или же совсем сайтом? Просто сейчас фон и все такое у меня просто нарезано кусками с псд макета... Но как я понимаю, можно ведь из макеты просто все по отдельной картинки сохранить слоями и уже потом просто тыкать на сайт слои?!

[WebSet 74]

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

Нет. Слои - это только фотошоп. В html+css такого реализовать нельзя.

Создаете изображение похожее как в примере:

http://a.zeos.in/sprites.png

Т.е., вам нужно их как бы рядышком все склеить. В 1 картинку. Без каких-либо наложений. Экспериментируйте.

[inokentik 45]

А почему слоями то не получится? Вот куча стилей например и у каждого писать z-index 1 и тд... По идее так ведь можно кучу картинок задать чтоб грузились в нужном порядке!! Я имею ввиду не про кнопки и такие мелкие картинки, а про телефон, шнур, розетку, карту, ручку и тд.. Ведь они сейчас у меня просто одним слоем все в виде бэкграунда

[- Den - 32]

Для эффективного использования спрайтов, как минимум одна сторона блока должна быть фиксированной.

Иконки нужно располагать тоже правильно, чтобы они нигде не вылезли, особенно, если у блока одна из сторон резиновая.

Повторяющийся фон, к примеру не получится так использовать.

Чтобы понять суть работы и как правильно рисовать спрайт, нужно экспериментировать, тогда быстрее станет понятен смысл.

В сети есть даже сервисы по созданию спрайтов и css-кода к ним, поищите их, посмотрите, что они понасоздают

Изменено 23 марта 2011 пользователем - Den -

[WebSet 74]

inokentik,

Мы видимо друг друга не понимаем. Про слои я вообще подумал сначала как в фотошопе.

В общем зачем так заморачиваться, когда можно дивами наложение друг на друга делать? И регулировать уже как угодно и как нужно позицию дива и бекграунда. Ну или изображения.

[inokentik 45]

ВОпрос про кеширование это... А все картинки лучше размещать в файле ПНГ горизонтально, вертикально или это вообще без разницы?

[inokentik 45]

Блин, вот посидел попробывал... Просто выводить картинки понял как таким образом... А как быть например, если у меня при наведении на одну иконку должна появится вторая? Эти иконки используются с одноже файла этого с картинкой.. Как тогда прописать это все? То есть вот у меня на сайте например есть иконки в главном меню, при наводе их они выделяются в рамочку (это второй рисунок). Как сделать чтоб все бралось из одного файла, если сейчас у меня прописано это так:

a.game {background: url(../images/game.png); display: block; width: 81px; height: 81px;}

a.game:hover {background: url(../images/game1.png); display: block; width: 81px; height: 81px;}

И я хочу например в нужном месте шаблона вставить ссылку типа <a href="" class="game"></a>

[- Den - 32]

a.game {

  background:url(../images/game.png);

  display:block;

  width:81px;

  height:81px

}


a.game:hover {

  background-position: -20px -50px

}

[/html]

-20 - позиция нужного элемента на фоновой картинке от левого края

-50 - от верхнего края

К примеру, если нужный элемент на фоновой картинке находится в верхнем левом углу, то прописывать позицию вообще не нужно будет, потому что слева 0, сверху 0, а фон и так по умолчанию встаёт в верхний левый угол блока.

Цифры конечно просто для примера

т.е. вы как бы двигаете фоновую картинку под блоком

Изменено 24 марта 2011 пользователем - Den -

[inokentik 45]

Ну так погоди, смысла не могу понять, ведь если сделать как ты написал, то получается это у нас уже все равно идет два файла, один файл game.png а второй общая...? Смысл тогда от этого кэширования?? Я ведь наоброт хочу все такие картинки поместить на один файл и чтоб использрвать уже все из него... Как тогда быть в такой ситуации?

[- Den - 32]

Почему два? Один - game.png

Возьмите для наглядности лист бумаги, нарисуйте на нем пару цветных кубиков. Возьмите 4 спички сложите их квадратом и подвигайте лист бумаги под этим квадратом.

Здесь тоже самое.

Лист бумаги - это game.png

Спички - это ваш блок

А ваши движения это позиционирование фоновой картинки относительно вашего блока

[inokentik 45]

Нет, наверное вы не так меня поняли... Вот смотрите, у меня есть файл по примеру ZEOS-а... Один файлик, в нем куча картинок...

Как их вывести просто на страничку, я уже понял... А вот как например сделать так:

-сейчас выведена одна картинка, при наведении на нее мышкой чтоб появилась другая, тоже из этого же общего файла?!

А то что выше, я просто для примера привел как сейчас на сайте вооплощено, без учета нового файла, то есть на данный момент у меня скажем так 1 файл со всеми картинками... Но например когда картинки по отдельности, я сделал чтоб одна картинка менялась на другую при наведении на нее мышкой, а тут сообразить не могу это.

[- Den - 32]

Вот сделал для вас живой пример, скачайте, посмотрите

http://realfile.ru/644001

Изменено 24 марта 2011 пользователем - Den -

[inokentik 45]

Вот, теперь понятно) Спасибо!

Хотя блин опять нифига не понял(((( Работает например как ты указал, когда начальный элемент по умолчанию самый левый считается.. А как например сделать вот из этой картинки?

Например для конвертика с письмом? То есть чтоб спева был просто конвертик, а когда на него наводишь мышкой чтоб конвертик в зеленой рамке?! Подскажи пожалуйста, ничего не выходит у самого

[WebSet 74]

inokentik,

.convert{height:81px; width:125px; background-image: (url); background-repeat:none; backrgound-position:0 -250px;}

.convert:hover{height:81px; width:125px; background-image: (url); background-repeat:none; backrgound-position:0 -375px;}

вот типа того

[inokentik 45]

Да нет, я такое уже пробывал( Кто нибудь может попытаться сделать рабочий вариант?(((

[WebSet 74]

Да нет, я такое уже пробывал( Кто нибудь может попытаться сделать рабочий вариант?(((

и что тут "нерабочего"? <div class="convert"></div> существует? или переименовывали в свое? путь правильно прописали до изображения? правили пиксели? я на глаз сделал

Изменено 24 марта 2011 пользователем WebSet

[inokentik 45]

Да не знаю я что не работает, ничего не работает, я уже и так и сяк пробывал... Вот мой код в тестовом варианте:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">


<head>

<style type="text/css"> 

.aaa { background: url("sprites.png"); }


.bbb1 { background-position:    0px   0px; width:  81px; height: 81px; }

.bbb2 { background-position:  -81px   0px; width:  81px; height: 81px; }

.bbb3 {	background-position: -162px   0px; width:  81px; height: 81px; }

.bbb4 {	background-position: -458px   0px; width:  89px; height: 26px; }

.bbb5 { background-position: -458px -26px; width:  89px; height: 26px; }

.bbb6 { background-position: -547px   0px; width:  89px; height: 26px; }

.bbb7 { background-position: -547px -26px; width:  89px; height: 26px; }



a.game  {background-position: 81px 0px ; width: 81px; height: 81px;}

a.game:hover {background-position: 0px 0px ; width:81px; height:81px;}


.convert {height:81px; width:125px; background-image: ("sprites.png"); background-repeat:none; backrgound-position: -80 0px;} 

.convert:hover {height:81px; width:125px; background-image: ("sprites.png"); background-repeat:none; backrgound-position: -60 0px;}




</style>

</head>


<body bgcolor="#cccccc">

<a href="" class="aaa game"></a><br /><br /><a href="" class="convert">dfsd</a><br><br>

<div class="convert"><a href="">dsfds</a></div><div class="convert"></div>

</body>


</html>

ни в одном из случаев не работает! Работает только тогда, когда у первой картинки убрать параметр позиционирования, а когда начинаешь там указывать пиксели. сразу перестает..