Deff,
не меняются, а картинок будет очень много (на тысячи пойдет счет по примеркам). Теперь вот сижу и не врубаюсь, как сделать. Сам спрайт готов, код нужно настрочить теперь..

scpooch,
Не делать все в один спрайт, а нарезать спрайты постранично, имя картинки совместить с расширением страницы

Deff,
я вас не понял.
У меня на странице, грубо говоря, квадрат (1000х1000). Он разбит, скажем, на 25 фрагментов (200х200). Изначально я его нарезал на эти 25 кусков в фотошопе и вставил на страницу тем же квадратом. Теперь пытаюсь без нарезки исходника разбить его на эти самые фрагменты (200х200) в CSS.

scpooch,
я говорил о том, если объем полного спрайта более 700 кБ, её стоит
разбить на части, желательно привязанных к страницам использования,? если данное разделение возможно( можно привязать название файла к названию страницы, на которых будет использоваться данный спрайт)
=================================================
Для последующей вставки удобнее делать спрайт в одну строку, вытянутой в длину или ширину(конечно, если кол-во картинок не 1000)
Квадратом - сложно вычислять смещение
а так чисто ставите бекграундом

/* Тут спрайт вытянут по вертикали */

div[id*="zap"] {
  background-image:url("Ccылка на картинку")
}

#zap1 {
  background-position:50% 0;
}
#zap2 {
  background-position:50% 100px;
}
#zap2 {
  background-position:50% 200px;
}
#zap3 {
  background-position:50% 300px;
}
....//И т.д.

Возможно удобнее при много картинках ставить позицию бекграунда не через css, а скриптом...

т.е тогда в css остаётся

div[id*="zap1"],div[id*="zap2"],div[id*="zap3"] {
  background-image:url("Ccылка на картинку")
}
div[id*="zap4"],div[id*="zap5"],div[id*="zap6"]  {
  background-image:url("Ccылка на картинку")
}

(Это если спрайты по 30 картинок

Deff,
спрайт вышел 209 кб, я думаю это нормально. Сейчас протестирую..

Сначала вышла какая-то белиберда - позиции фрагментов перепутались и картинка в паззл превратилась. Подредактировал код и все встало на места (правда, так и не понял, почему косяк такой).

Код CSS

.awki {
        height:200px;
        width:200px;
        background:url(../images/a.jpg)
}

/* awki */
.awki.a1 {background-position:0px 0px;}
.awki.a2 {background-position:200px 0px;}
.awki.a3 {background-position:400px 0px;}
.awki.a4 {background-position:600px 0px;}
.awki.a5 {background-position:800px 0px;}
.awki.a6 {background-position:0px 200px;}
.awki.a7 {background-position:200px 200px;}
.awki.a8 {background-position:400px 200px;}
.awki.a9 {background-position:600px 200px;}
.awki.a10 {background-position:800px 200px;}
.awki.a11 {background-position:0px 400px;}
.awki.a12 {background-position:200px 400px;}
.awki.a13 {background-position:400px 400px;}
.awki.a14 {background-position:600px 400px;}
.awki.a15 {background-position:800px 400px;}
.awki.a16 {background-position:0px 600px;}
.awki.a17 {background-position:200px 600px;}
.awki.a18 {background-position:400px 600px;}
.awki.a19 {background-position:600px 600px;}
.awki.a20 {background-position:800px 600px;}
.awki.a21 {background-position:0px 800px;}
.awki.a22 {background-position:200px 800px;}
.awki.a23 {background-position:400px 800px;}
.awki.a24 {background-position:600px 800px;}
.awki.a25 {background-position:800px 800px;}

Вот часть кода, отвечающего за вывод фрагмента.

<td>
			<a href="www.mysite.net/gallery/a25.html"> /* здесь линк, куда ссылается фрагмент  */
				<div id="a25"><img src="images/blank.gif" class="awki a7" alt=""></a></td></div></a></td>

Возвращаемся к выделению фрагмента (бордером или чем еще можно) :)

Чот Аввы - 200x200 , типично - 170х240

Вернусь поздно... так что терпите

Я вообще ничего не понял :no:

scpooch,
Приеду - в час или два ночи по москве
Аватарки стандартных размеров 170х240

Deff,
там речи про аватарки не идет, идея другая. Буду ждать, пока попробую сам что-нибудь сделать. Удачной поездки!

Немного покопал код и стала работать версия:

<style>
   a25:target {
       visibility: hidden; 
   }
  </style>

<a href="http://mysite.net/next/a25.html">
<a25 id="a25"><img src="images/blank.gif" width="200" height="200" border="0" alt=""></a25></a>

Правда, то, что мне надо - border, либо не фурычит, либо криво встает.
Полагаю, это из-за того, что:

1) у самого фрагмента border="0", и все фрагменты стыкованы вплотную, образуя единую картинку
2) использован спрайт с 1х1px гифкой в основе

Что можно прописать

<style>
   a25:target {
       ??????????????;  /* [COLOR="Red"]СЮДА[/COLOR] */
   }
  </style>

, чтобы выделить фрагмент? При этом, желательно сохранить основу со спрайтом.