Background hover-ссылки

[CoDy]

Хочется "дешего и сердито" оформить блок навигации, меняя фон hover ссылки, но в опере возникает проблемка:

рядом с курсором вылазит индикатор загрузки, типа происходит загрузка графики, но на самом деле ничего не качается. И что характерно при кешировании графики данной проблемы не возникает.

a:hover { background: url(nav_sel_bg.gif) repeat-x;   
}

Если кто то может прокоментировать данную ситуацию, буду оч признателен.

[Nekromancer]

cursor: pointer;

[Searcher]

что значит не грузится? еще как грузится!

если ваша картинка nav_sel_bg.gif еще не загружалась, то при возникновении hover броузеру приходится её подгружать.

решение простое: вместо двух разных картинок на ссылку без hover и с ним, делаем один файл с этими двумя картинками и по hover просто позиционируем фон на вторую часть картинки.

[CoDy]

Оч хороший вариант, Searcher, но дело в том что в качестве фона используется фрагмент изображения, который потом repeat-x.

Думаю если сделать nav_sel_bg фоном скрытого блока, эффект будет аналогичен.

Спс за подсказку. ))

[Nekromancer]

Google > Javascript подгрузка изображений

[Searcher]

У вас повтор по горизонтали, значит можно нарисовать по вертикали фрагменты повтора и позиционировать фон по вертикали, а повтор оставить для горизонтали.

[CoDy]

Кроме того, такя компоновка фрагментов фона имеет преимущество, которое выражается в уменшении объема графики(если конечно изображения имеют сходные наборы цветов в палитре), да и не "теряешся" в изобилии файлов.

Делал набор изображений для фигурных границ тыблици. Потом воспользовался, выше приведенной, идеей и скомпоновал изображения не в 8, а в 2 файла. Объем графики уменшился в 2,5 раза.

К минусам можно отнести несколько "закрученные" css-правила.

[Justnewone]

Кроме того, спрайты, как назван этот способ, очень кстати в высоконагруженных системах, вместо 20 запросов на сервер можно обойтись одним.