Preloader obrázku

Řeknu ti jedno. Vykašli se na preload obrázku pomocí js a udělej to pomocí css. A to následujícím způsobem:

Předpokládám, že měnící se obrázek chceš použít, jako položku menu. Tzn. máš následující kus kódu:

<a href="#">Seznam</a>

Na pozadí této položky chceš dostat nějaký obdélníkový obrázek o rozměrech 100x25, takže si necháš odkaz zobrazit jako blokový element, nastavíš mu rozměry a na jeho pozadí umístíš obrázek.

#odkaz {

 display:block;

 width:100px;

 height:25px;

 background-image:url("obrazek.gif");

}

<a href="#" id="odkaz">Seznam</a>

Po najetí myši se má obrázek změnit. To uděláš tak, že nebudeš načítat nový obrázek, ale v nějakém editoru přilepíš ten změněný k tomu aktuálnímu, třeba doprava, takže výsledná velikost obrázku bude 200x25. Změnu budeš realizovat pouhým posunem obrázku doleva.

#odkaz {

 display:block;

 width:100px;

 height:25px;

 background-position:0px 0px;

 background-image:url("obrazek.gif");

}



#odkaz:hover {

  background-position:-100px 0px;

}



<a href="#" id="odkaz">Seznam</a>

A je to i s preloaderem. Teda doufám, že to funguje :)

Matouš
Kód je JS preloadu a rolloveru je, jak na odkazované stránce, tak ve tvém příkladu v pořádku. Nevím, kde by mohla být chyba.

Doporučuji ti použít CSS, jak uvádí venca12.

Matouš
http://mracek.hostuju.cz/chat/
je zvlastni, ze mi to funguje, u smajliku, treba :)

Nicmene zkus toto:
<script type="text/javascript">
var a,b;
a = new Image();
b = new Image();
a.src = "prvni.gif";
b.src = "druhy.gif";
</script>

<a href="odkaz.html"><img src="prvni.gif" onmouseover="this.src=b.src"
onmouseout="this.src=a.src" alt="prvni.gif" width="100" height="50"></a>

Janovsky to ma pro IE a nepouziva slovicko VAR.
Nicmene by to slo cele napsat daleko elegantneji

Janovsky to ma pro IE a nepouziva slovicko VAR.
Tobě to snad bez var v nějakém prohlížeči nechodí?

Nicmene by to slo cele napsat daleko elegantneji
Nevím, co znamená nicmene, ale elegantnější skript jsem zatím neviděl.

Bubák
onmouseover se da vyhodit do externiho JS (kam stejne patri, pac na HTML nema zadny vliv) a HTML kod pak vypada:

<div id="menu">
<a href="odkaz.html"><img src="prvni.gif" alt="prvni.gif" width="100" height="50"></a>
</div>

tak to mi prijde o dost elegantneji a k tomu pridas funkci, ktera prida to onmouseover...

Bubák
Ano, bez VAR mi nektere veci treba ve FF nechodi a v nekterych zvlastnich pripadech ani v IE, kdyz se ptas. Priklad ti z pameti nereknu, protoze ja to pisi vsude, ale treba pri praci s objekty muze nastat takova situace...

Matouš
Pro 2 ruzne obrazky musis mit 2 promenne.
Nezapomen vsak na to, ze menu by melo byt pouzitelne i bez obrazku, cili obrazky se pouzivaji spise jako podklad a toho prave vyuziva CSS, jak ti psal venca12. A bylo by to mozna lepsi resit pres class.
Kdyz uz v JS, tak bych prepisoval pres JS zrovinka cele menu na obrazky. Aby se i bez JS zobrazilo funkcni menu. Pripady bez JS jsou sice ojedinele, ale treba takova ctecka pro slepce uz zas tak ojedinela neni. (3%?)

Zajímalo by mě, jakou podporu má preload pomocí CSS u prohlížečů. Jestli se s tím baví velká trojka ( IE, Mozilla, Opera )
Zatím na to používám JS, ale má někdo vypnutý.
Dík za odpověď

Pardon, nepřihlásil jsem se, tak ještě podpis : Axamith

Záleží, jak ho uděláš. Něco popisuje Yuhů
display: none /*nenačte Opera, Konqueror nevím, otestuji zítra */
position: absolute; visibility: hidden; /* bez problémů */
position: relative; left: -10000; /* bez problémů */

To, co tady napsal venca12, není preload. Princip je, že obrázek je na pozadí odkazu, ten musí být blokový, nebo floatovaný, aby mu šly zadat rozměry, a toho obrázku je vidět jen část. A s tím pozadím se při :hover "šoupe", abys viděl jinou část.

Ukázka s kódem ořezaným skoro "na kost":
http://teststranek.kvalitne.cz/css-rollover/

Tady jsem použil CSS preload, protože chci mít přesně umístěnou odrážku i po změmě velikosti písma:
http://teststranek.kvalitne.cz/menu-odrazkove-1/

Axamith
Preload obrazku je sam o sobe nesmysl. Ja cekam na dobu, kdy se bude dat udelat preload cele stranky a to tim zpusobem, ze server posle zipkod HTML+CSS+JS jako 1 balicek, obrazky jako dalsi, nakonec flash a podobne veci. Protoze na kazdy dalsi soubor se pridava 1k hlavicka a kdesi cosi. A kdyz ma nekdo 40 obrazku po 0,5-2k , tak krome 40k se mu pripocita dalsich 40k + dotazy na ukoncil jsem soubor, zacni novy, ...

Neco jineho je ovsem nacteni vsech obrazku a ty skryte teda v JS. Coz je teda povazovano za nejaky preload.
Ja osobne bych neco takoveho delal pres BODY, kde bych stanovil nejaky GROUPIMG type="hidden", kam by se napsali vsechny obrazky v poradi, v jakem je chces nacitat. Tam bych potom dal prvni obrazky pro menu a uvnitr stranky. Jako posledni pozadi v CSS

Peta Já to řeším tak, že načtu všechny potřebné obrázky dopředu, spáruji je a potom je přez JS prohazuji. Ale dosti uživatelů má JS vypnutý, tak hledám vhodné řešení bez JS, které podporuje velká trojka. A

Axamith Viz Bubák CSS backround-position
jakpsatweb - zdokonaleni odkazu
www.volny.cz/peter.mlich/hry/hry.htm - pexeso