Szybko ładujące się menu w css


(Xteer) #1

Witam ponownie,

potrzebuję zrobić menu w css tylko takie żeby było akceptowalne przez allegro. Dokładnie to takie jak w tej aukcji:

http://allegro.pl/koncowka-braun-oral-b-trizone-tri-zone-x-4-szt-i3301038479.html

konkretnie ten element: tc5f.jpg

Umie zrobić sobie menu na hoverach tylko że takie długo się ładuje po najechaniu i dany obszar jest pusty, a to w/w jest od razu.


(mario@) #2

Skopiuj sobie kod strony i go przeanalizuj.

Ogólnie całe menu to jedna zbiorcza grafika (dlatego po najechaniu na menu zmiany są widoczne od razu), gdzie poszczególne jej obszary są wyświetlane w danym miejscu za pomocą parametru background-position (oczywiście + hover). Rozwiązanie to jest często stosowane ze względu na krótszy czas wczytania jednej zbiorczej grafiki niż kilkunastu mniejszych.


(Rst00) #3

Poczytaj o CSS Sprites.


#4

red_car , proszę zapoznaj się z tą stroną oraz tym tematem, a następnie, używając przycisku image.php?album_id=20&image_id=4038


(Xteer) #5

Tylko ten cały CSS Sprites to chaotycznie jest tłumaczony i nie wiem czy w ogóle to jest to co chce uzyskać.

Mam taki kod:

| obrazek1.jpg | obrazek2.jpg | obrazek3.jpg | obrazek4.jpg | obrazek5.jpg |
| obrazek6.jpg |
[/code] I chce zrobić coś na styl hover tylko żeby szybciej się ładowało po najechaniu myszką. Wiem, że sam hover robi się tak:

[code]

i że po zrobieniu hover przestawiam img src na div class.

Zastanawiam się jak to napisać żeby trzymało się kupy - wyglądało jak ten kod tylko z szybkim menu. Sam kod pochodzi z image ready.

Jak to ugryźć?


(mario@) #6

Mały przykład

style type="text/css"test div{    width:36px;    height:36px;    background:url('http://ocdn.eu/images/pulscms/NDk7MDA_/757aed798092ea091252deb0534a2834.png');background-position:0 0;