| Autor | Zpráva | ||
|---|---|---|---|
| JJ Profil * |
#1 · Zasláno: 27. 9. 2009, 10:53:49
Zdravím,
používám css menu kde mám po načtení stránky zobrazen na pozadí obrázek (stav 1). Po najetí myši nad obrázek se aktivuje hover a zobrazí se jiný obrázek (stav 2). Předpokládám: dochází tam k tomu, že se při hover odešle odešle požadavek na server o druhý obrázek (stav 2) a díky času který je nutný k odeslání požadavku na stav 2 a přijetí obrázku tam dochází k probliknutí (není tam po dobu třeba 1s nic - jen bílá plocha). A ptám se: je možné nějak zařídit, aby si prohlížeč načetl stav 2 už při načtení stránky a ne až po hover? Vidět to lze tady: http://www.sgreality.cz Vím, že se to dá udělat tak, že vytvořím jeden obrázek se dvěma stavy a ten pak posouvám, ale takto to z mnoha důvodů řešit nechci. Máte nějaký nápad? |
||
| panther Profil |
#2 · Zasláno: 27. 9. 2009, 10:57:02
JJ
„ale takto to z mnoha důvodů řešit nechci.“ z jakého důvodu? Další možnost, i když, myslím si, zbytečná, je preload obrázků. |
||
| tiso Profil |
#3 · Zasláno: 27. 9. 2009, 11:12:20
|
||
| JJ Profil * |
#4 · Zasláno: 27. 9. 2009, 11:12:26
V některých prohlížečích to špatně funguje . i když to používám také. Např. tady:
http://www.sgreality.cz/?page=article_proj5_3 nebo tady: http://www.sgreality.cz/?page=article_proj4_3 |
||
| JJ Profil * |
#5 · Zasláno: 27. 9. 2009, 11:13:31
Šlo mi spíš o to - jestli by nešlo, aby se to načetlo do paměti už při načtení stránky.
|
||
| JJ Profil * |
#6 · Zasláno: 27. 9. 2009, 11:21:06
Na odkazu od Tisa jsem našel toto - zkusím a dám vědět:
#preload { height: 0; overflow: hidden; }
<div id="preload"><img src="..." /><img ... ></div> |
||
| tiso Profil |
#7 · Zasláno: 27. 9. 2009, 11:38:19
JJ [#6]:
1. som tiso, nie Tiso! 2. vybral si si zlý tip, to nie je CSS preload, to je len preload obrázkov. Správne riešenie je nepoužívať <img>, ale nastavovať obrázok ako pozadie prvku cez CSS. Inak sa ti pri vypnutom CSS zobrazí na stránke zhluk nič nehovoriacich obrázkov. |
||
| slovakCZ Profil |
#8 · Zasláno: 27. 9. 2009, 12:04:48 · Upravil/a: slovakCZ
pouzil jsem to napr tady http://estarweb.eu/ u leveho menu.
<div class="polozka2">polozka menu</div> a CSS:
<style>#menu .polozka2 a{
background:url(../images/menu/back1.png) no-repeat;
width:117px;
}
#menu .polozka2 :hover {
background-position: -117px 0;
}</style>
obrazek pote musi vypadat takto: 
Jde o to ze obrazek ktery pouzijes na menu (stav1) je 1. pulka obrazku. Pote druha pulka obrazku je ta, ktera se aktivuje pri hoveru (stav2). NA tomto obrazku jak jsem poslal je videt, ze prvni pulka obrazku je cerna a druha je s teckou... snad chapes :o) pri hoveru se jen posune pozadi o 207px vlevo, takze se uz nic nenacita.. pouzivej tuto moznost, nejlehci, a nejpochopitelnejsi. |
||
| Bubák Profil |
#9 · Zasláno: 27. 9. 2009, 12:10:25
Třebas někak takto:
<style>
#preload { height: 0; height: 0; overflow: hidden; position: absolute; left: -1000px;}
#preload-1 { background: url(obrazek-1.png); }
#preload-2 { background: url(obrazek-2.png); }
#preload-3 { background: url(obrazek-3.png); }
</style>
<div id="preload">
<div id="preload-1"></div>
<div id="preload-2"></div>
<div id="preload-3"></div>
</div> |
||
| JJ Profil * |
#10 · Zasláno: 27. 9. 2009, 12:36:43
Tak nakonec jsem se rozhodl použít řešení s posunem pozadí [#8] . Musím to ještě otestovat v různých prohlížečích. Děkuji všem a tisovi se omlouvám - nechtěl jsem ti zkomolit nick. Díky.
|
||
|
Časová prodleva: 15 let
|
|||
0