Képek és dinamikus html

Képek és dinamikus HTML

képobjektum

Az egyik objektumát a dokumentum tárgya a képet. Sajnos, ez a lehetőség nem minden böngésző támogatja, vezérlőkódját. A legtöbb régebbi verziói böngészők, amelyek még mindig dolgozik ilyen tárgyak NN3 és IE4. Ezért minden, ami ebben a fejezetben leírt esetekre nem vonatkozik használt NN2 (minden platform) és IE3 (Windows). Ha igen, akkor egy kifejezetten csökkent ebben az esetben, hogy a kód kell elhelyezni az oldalon, hogy elkerüljék a hibákat, ha dolgozik régebbi verziói böngészők.

Bár, őszintén szólva, ezek a régiek a hálózat nagyon kevés. És, azt hiszem, el lehet hanyagolni.

Mivel a dokumentum tartalmazhat egynél több képet, a referencia kép objektumot a dokumentum objektum modell képviselteti magát, mint egy tömb tartalmazza a tárgyra vonatkozó dokumentumban. Ezért, akkor nézze meg a képet, vagy az index a tömbben, vagy név szerint. Sőt, a tömb index lehet egy string változatát a cím képet. Ezért minden, ami írva az alábbiakban, egy elfogadható módja határozza linkek:

változó kép

Az előnye, hogy ellenőrzött forgatókönyvek tárgyak képei, hogy a szkript lehet változtatni a képeket már elfoglal egy téglalap alakú területet az oldalon. A böngészők IE4 NN6 + +, és meg is változtatja a méretét, így megfelelő képek végrehajtása a többi oldal tartalmának áramlását.

Pre-loading képek

Képek letöltése Web-szerver bizonyos időt vehet igénybe. Ha az oldal megszervezni, hogy válaszul a kép a felhasználó intézkedéseket az oldalon változás, kívánatos, hogy a sebesség ezen ügyletek nem volt alacsonyabb, mint a többi médiumhoz. Ha a felhasználó meg kell várni sokáig, amíg a kép megváltozik, nem valószínű, hogy kap belőle legalább néhány szórakoztató.

Annak érdekében, hogy töltse le a képeket, akkor létre kell hozni egy memória tárgy a képen. A tárgy képét a memóriában, bizonyos tekintetben eltér a kép tárgyának egy dokumentum segítségével létrehozott leírások . Azokat az objektumokat, egy scriptet és kerülnek csak a memóriában, az oldal nem jelenik meg egyáltalán. De jelenlétük a kód a dokumentum vezet az a tény, hogy az oldal betöltésekor a kép is betölthető. Az objektum modell függvénye a design tárgy parancsot. amelyeket fel lehet használni, hogy megteremtse a memória a tárgy képét, az ábrán látható módon.

Váltakozó képeket egy dokumentumot azonos módon.

Listing 7.1 egy viszonylag egyszerű példa leírása oldal, amely egy leíró és a választási listát, amely lehetővé teszi, hogy mozog a kép a dokumentumban helyett a négy bővült a böngésző cache (beleértve az eredeti kép leírása a leíró.

Listing 7.1. Precache képek

létrehozása hosszabbítás

A legegyszerűbb módja, hogy vonzóbbá tegye az oldal használata átváltógombok, megváltoztatja a megjelenést, ha az egérrel rámutat rájuk. A mértéke behelyezés közben egy kép a változás kizárólag ízlés kérdése. A hatás lehet alig látható - megvilágítás vagy a kiválasztás az eredeti kép határait, illetve rendkívül radikális - a teljes változás színséma. Bármelyik lehetőséget választjuk, írja a forgatókönyvet lenne még mindig ugyanaz.

Ha több ilyen gombok együtt egy csoport, célszerű, hogy gondoskodjon egy ilyen struktúra a memóriában, mint egy sor kép objektumok a megfelelő opciók számozás és megnevezéséhez, szükséges egy kontroll tömbben. Listing 7.2 ábra példát mutat a megrendelt tömbök négy vezérlő gombok. Listán látható kódot használják az alkalmazáson belül elvégzi a szivattyúzás a képek. Ez az egyik legösszetettebb és hosszú listát a képzés, így némi magyarázatra szorul. Ezek a magyarázatok fog irányulni során közvetlenül a kijelző lista.

Listing 7.2. csere képek

Csak böngészők, együttműködve a képet egy tárgy megengedett letölthető képek a cache. Ezért minden megfelelő szekvenciával tárolt, ha szerkezete. egy feltételes utasítás, amely ellenőrzi tömb document.images. A régebbi verziói böngészők, ez az érték nem határozható meg, amely megfelel az értéke hamis, ha ellenőrzi, ha a feltételek az egységben.

Feltölteni a képeket a memória létrehozásával kezdődik, a két sorozatát tárgyak képei. Az egyik tömb tartalmaz információt a felhasznált képek a gombok inaktív állapotban (ki). Egy másik kép, amely az aktív gombok (állami). Ezekben tömbök, indexek helyett egész vonalon. String név felel meg a nevét, hogy a rendelt látható grafikus objektumok, amelynek leírását adjuk meg az alábbi kódot. Ebben az esetben a kód könnyebben olvasható. Például offImgArray rekord [ „play”] világosan kitűnik, hogy miért van ez az elem. Amint látható továbbá a tőzsdei, a szivattyúzás a képeket nem ütközik más szokások jelenik meg az oldalon (ez akkor lehetséges, ha a kapcsolatot a megjelenített képek csak numerikus indexeket használnak szivattyúzás).

Miután létrehoztunk egy tömb, és bízzák az első négy eleme egy új, üres objektum képek elemeit a tömb mozog ismét, hogy jelezze az src tulajdonság minden objektum végrehajtott egy sor módon grafikai fájlokat. A megfelelő kódsort végrehajtásra, ha az oldal betöltésekor, úgy, hogy azonnal folytassa a képek betöltéséhez a megfelelő területen a cache memóriát.

Mint látható a következő HTML kódrészlet-kódot, amikor a felhasználó lebeg az egérmutatót bármelyik megjelenített grafikus objektumok a dokumentumban, az onMouseOver esemény (Document Object) hatására Imageon () függvényt. halad, hogy a neve egy bizonyos kép. Imageon () függvény használja ezt a nevet, hogy szinkronizálja bejegyzések array document.images (megjelenített kép) és egy sor, a memóriában tárolt kép az aktív onImgArray gombokat. Src tulajdonság az elemek a tömb van rendelve a megfelelő tulajdonságainak src kép dokumentum.

Ahhoz, hogy ugyanez történik, ha használja a onMouseOut eseményeket. amely lefordítja a kép az „OFF” állapotban, amely felhasználja imageOff () függvény az azonos index értéke, mint a paraméter.

Ebben a példában a vezérlési funkciók alább nem használják, de ennek ellenére nem tartalmaznak üres szereplők. Ezt annak érdekében, hogy működjön fogások minden hívás az aktivációs link mutat egy képet.

Minden kép körül egy objektum referenciát. Mivel meg kell csinálni, mert az objektum referencia igénybe rakodók, amelyekre szükség van beállítva a válasz script válasz felhasználó manipuláció az egér, mivel lehetővé teszi, hogy fenntartsák a kompatibilitást a dokumentum NN3. Minden egyes esemény a onMouseOver Imageon () függvényt. halad végig a név lapozható a tárgy képét. Mivel mind a onMouseOver és onMouseOut kell használni vissza igaz kifejezést. A folyamat beindítását, a második függvényhívás setMsg () párosul az a követelmény, hogy visszatérjen igaz. setMsg () függvény mindig visszatér igaz. és jelenléte a return mielőtt hívja ezt a funkciót képes a kívánt eredményt. Ez egyszerűen csökkenti a kódot, és ez minden

szorosan figyelemmel kíséri a bevezetése ezt a hirdetést, majd használja azt, hogy minden egyes fogantyú <А> annak minden attribútum volt található az ugyanabban a sorban.

Annak érdekében, hogy a teljesítése ezt nagyon hosszú script, vonja le a megfelelő gombokat a saját. Ha készen van, hogy (ha szükséges) a szükséges változtatásokat a forgatókönyvet. Listing jobb mutatkozzon be. Csak akkor tudjuk érezni a varázsát létre egy script.

Több dinamizmus a HTML

A technológia a kép objektumok swap csak az előzetes ismeretség a fejlesztések már kapható a dinamikus HTML (Dynamic HTML vagy DHTML). A böngészők IE4 + és + NN6 képes változtatni a stílusát és tartalmát a HTML elem. Minden tartalom szó „rázza a lábát” az oldalon.

Az ok, hogy sok éven át a Microsoft és a Netscape használja alapvetően eltérő megközelítések a fejlesztés a dokumentum objektum modell, csak a böngészők IE5 és NN6 miatt az átmenet a W3C DOM szabvány lehetővé vált, hogy ugyanazt a DHTML script kód mindkét típusú böngészők. Még így is, IE5 és IE5.5 nem támogatja a W3C DOM szabvány olyan mértékben, hogy ez teszi NN6. Ha a célközönség, amely célja, a szkript használja alapvetően az IE, akkor egy lehetőséget, amely lehetővé teszi, hogy hajtsák végre a Microsoft objektum modellt, amely kompatibilis böngészők le IE4 (kivéve néhány kompatibilitási problémák az IE4 a Macintosh).

Így ér véget az utolsó leckét (a lecke!) Ebben a kézikönyvben. Ha lelkiismeretesen tanulmányozta mindazt, ami a fent megadott, és szorgalmasan adjuk javasolt kódsort, készen áll, hogy, a merülés hanyatt-homlok a script írásban. Természetesen a fundamentumok, hogy én adtam a man oldalakat nem elég produktív, de ígérem, hogy a közeljövőben hivatkozás típusú információkat és közzéteszi az egyes cikkeket. Mindez segít többször.

Sok szerencsét!

Kapcsolódó cikkek