Autor Zpráva
Matouš
Profil *
Ahoj mám dotaz ohledně článku o preloadu obrázku na stránce http://www.jakpsatweb.cz/javascript/preload-obrazku.html

Nefunguje mi to! Prostě chci použít tohle, jak je to tam napsaný:

<script>
promenna = new Image();
promenna.src = "druhy.gif";
</script>

<a href="odkaz.html"><img src="prvni.gif" onmouseover="this.src=promenna.src"></a>

To by podle autora mělo fungovat ale u mě se nic když na obrázek najedu myší zůstane pořád stejný (původní).

Poraďte mi prosím jak to udělat. Bez preloaderu samozřejmě prohazování normálně funguje, ale chtěl bych ho použít. Předem dík.
venca12
Profil
Ř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 :)
Bubák
Profil
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.
peta
Profil *
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
Bubák
Profil
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.
peta
Profil *
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š
Profil *
Bubák + peta
Dík kluci za pomoc, kód jak jsem ho uvedl výše byl opravdu v pořádku. Bohužel v mém skriptu už tak uplně v pořádku nebyl. Zaměnil jsem slovíčko "new" za "NEW", což v javascriptu nejspíše není ekvivalentní, a proto mi to nefungovalo. Nyní je vše v pořádku.

Ještě mám jeden takový přitroublý dotaz. Chci si jenom utvrdit v jedné věci. Mám menu o více položkách a v každé z položek se prohazuje dvojice obrázků. Pro každou tu dvojici musím inicializovat zavláštní proměnnou, že jo? Tím myslím, pro první položku zavedu např. "prom1", pro druhou položku menu "prom2" atd. Dík za odpověď.


venca12
Tebou nabízenou variantu vyzkouším a pak dám vědět, jak to dopadlo. Je to pro mě ovšem trochu španělská vesnice :)
peta
Profil *
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%?)
Anonymní
Profil *
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ěď
Axamith
Profil
Pardon, nepřihlásil jsem se, tak ještě podpis : Axamith
Bubák
Profil
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/
peta
Profil *
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
Axamith
Profil
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
peta
Profil *
Axamith Viz Bubák CSS backround-position
jakpsatweb - zdokonaleni odkazu
www.volny.cz/peter.mlich/hry/hry.htm - pexeso
Toto téma je uzamčeno. Odpověď nelze zaslat.