Nacitanie obrazkov

xyz · Napísal **xyz**: 30.12.2009 12:03

Zdravim, je nejaky "overeny" sposob ako nacitat obrazky na pozadi webovej stranky?

Ide o to, ze mam menu tvorene zo 4 poloziek - 4 obrazky, kazdy je iny. Hover efekt sposobi dalsiu zmenu obrazka takze ich je dohromady 8.

Chcem, aby pri hover efekte sa nemuseli tie hover obrazky nacitavat, ale aby uz boli nacitane, pretoze to nevyzera dobre ked napr. server odpoveda pomalsie. Ako to docielim?

napadlo ma dat tie obrazky do dokumentu a dat im display: none, tym by sa nacitali a nezdrziavali by sa pri hover efekte. nuz takto by sa zobrazili naviac pri vypnutych styloch.

popisane to je blbo, ale hadam to pochopite

dakujem za odpovede

HAE07 · Napísal **HAE07**: 30.12.2009 12:22

ten obrazok na menu ries ako jeden. ze nebudes mat zvlast neaktivny btn a zvlast hover btn. ale spoj ich do jedneho a v css len zmen background-position ked das hover

rooobertek · Napísal **rooobertek**: 30.12.2009 12:30

Vo výpise v googli je logo takéto:
Nacitanie obrazkov

http://www.google.sk/images/nav_logo7.png

Ďuri · Napísal **Ďuri**: 30.12.2009 12:49

http://www.pcforum.sk/cache-obrazky-vt78599.html

camo · Napísal **camo**: 30.12.2009 21:27

Ak ich dáš na background tak sa ti pri vypnutých štýloch nezobrazia.

shaggy · Napísal **shaggy**: 31.12.2009 0:30

A ak ich dáš ako obrázok, tak sa ti pri vypnutých obrázkoch nezobrazia :roll:

(Môj príspevok bol ironický, chcel som naznačiť, aby si podobné blbosti ako napísal camo nepočúval)

Blackshadow · Napísal **Blackshadow**: 31.12.2009 0:49

Daj to ako 2 obrazky pod seba ale ako 1 obrazok.. Cize budes mat 2 obrazky tlacidla (normal a hover) pod sebou v jednom obrazku.. To sa ti nacita spolu a hned..

Dajme tomu, ze tlacidlo ma mat 100x20 px.. cize nas vysledny obrazok bude mat 100x40 px

Ty spravis tlacidlo:

Kód:

width:100px;
height:20px;
background-image: url('aaaaaa.jpg');
background-position:0px 0px;

a jeho :hover verzia:

Kód:

width:100px;
height:20px;
background-image: url('aaaaaa.jpg');
background-position:0px 20px;

tym positionom sa posunies po obrazku o 20px dole

shaggy · Napísal **shaggy**: 31.12.2009 11:21

Proste použi tzv. CSS sprity, tu máš pekný návod:
http://wellstyled.com/css-nopreload-rollovers.html
(ak by si to mal po anglicky, tak kliknutím na ten malý text napravo sa ti to prepne na českú verziu)

camo · Napísal **camo**: 31.12.2009 13:53

shaggy:
Ja som reagoval na jeho výslovné:

Citácia:

napadlo ma dat tie obrazky do dokumentu a dat im display: none, tym by sa nacitali a nezdrziavali by sa pri hover efekte. nuz takto by sa zobrazili naviac pri vypnutych styloch.

Dať ich na background by to riešilo a a zároveň by sa načítali hňeď. Teda nešlo o to, ho upozorniť, že ak to dá na backgroun tak sa mu to nezobrazí.
Alebo si to myslel inak?

EDIT:/mimochodom som napísal presne to na čo si ho ty odkázal. Ak by sa na to pýtal, doplnil by som, že sa mení background-position.
Ale ak je šírka premenlivá(čo je lepšie) dali by sa načítať tie obrázky ako pozadie nejakému elementu na konci stránky a dať mu visibility:none.
Tak ich neuvidí ani keď budú vypnuté štýly ani keď budú zapnuté.
alebo sa mýlim?

shaggy · Napísal **shaggy**: 31.12.2009 14:14

Aha, tak sa teda ospravedlňujem, pochopil som to tak, že si reagoval na to použitie obrázkov do pozadia. Keď si sem vložil tú vetu na ktorú si reagoval, tak to dostáva úplne iný význam

sorry.

xyz · Napísal autor témy **xyz**: 03.01.2010 13:20

dakujem za odpovede, velmi mi pomohli!

Nacitanie obrazkov

Podobné témy