Imagini și HTML dinamic
Obiectul imaginii
Unul dintre obiectele conținute în document este obiectul imaginii. Din păcate, acest obiect nu este acceptat de toate browserele care gestionează scripturile. Cele mai vechi versiuni de browsere care încă funcționează cu astfel de obiecte sunt NN3 și IE4. Prin urmare, tot ceea ce va fi descris în acest capitol nu este aplicabil dacă utilizați NN2 (toate platformele) sau IE3 (pentru Windows). Dacă da, puteți folosi codul specific pentru acest caz, care ar trebui plasat pe pagină pentru a evita erorile atunci când lucrați cu versiuni mai vechi ale browserelor.
Deși, pentru a fi sincer, în rețea există foarte puțini oameni în vârstă. Și ei, cred, pot fi neglijați.
Deoarece un document poate conține mai mult de o imagine, referințele la obiectul de imagine pentru documentul din modelul obiect sunt reprezentate ca un array inclus în obiectul documentului. Prin urmare, vă puteți referi la imagini fie prin index în matrice, fie prin nume. Mai mult, indexul matricei poate fi o versiune de șir a numelui imaginii. Prin urmare, tot ceea ce este scris mai jos este o modalitate acceptabilă de a stabili legături:
Imagini variabile
Avantajul utilizării obiectelor bazate pe imagini în scripturi este acela că scriptul poate modifica imaginile care deja ocupă o zonă dreptunghiulară pe pagină. În browserele IE4 + și NN6 +, puteți schimba chiar și dimensiunea acestor imagini cu fluxul adecvat în jurul restului conținutului paginii.
Preîncărcarea imaginilor
Descărcarea imaginilor de pe un server Web poate dura ceva timp. Dacă pagina este organizată în așa fel încât imaginile de pe pagină să se schimbe ca reacție la acțiunile utilizatorului, este de dorit ca viteza acestor operații să nu fie mai mică decât în celelalte programe multimedia. Dacă utilizatorul trebuie să aștepte mult timp, până când imaginea este schimbată, este puțin probabil să se bucure de asta.
Pentru a încărca imagini, trebuie să creați un obiect al acestei imagini în memorie. Obiectul imaginii creat în memorie diferă în anumite privințe de obiectul de imagine al documentului creat cu ajutorul descriptorilor . Obiectele create de scripturi și plasate doar în memorie nu sunt afișate deloc pe pagină. Dar prezența lor în codul documentului duce la faptul că la încărcarea paginii aceste imagini vor fi încărcate. În modelul obiect, există o funcție constructor pentru obiectul Imagine. cu care puteți crea obiecte de imagine în memorie, după cum se arată mai jos.
Imaginile din document se modifică în același mod.
Lista 7.1 este un exemplu destul de simplu de descriere a paginii în care este utilizat descriptorul și o listă de selecție care vă permite să mutați imaginea în document în locul unuia din cele patru descărcate în memoria cache a browserului (inclusiv imaginea originală descrisă în descriptor.
Listing 7.1. Pre-cache imagini
Crearea răsturnărilor
Cea mai simplă modalitate de a crește atractivitatea unei pagini este de a utiliza răsturnări care își schimbă aspectul atunci când plasați mouse-ul peste ele. Gradul de schimbare introdus în imagine este exclusiv o chestiune de gust. Efectul poate fi greu de remarcat - evidențierea sau selectarea ușoară a limitelor imaginii originale sau extrem de radicală - o schimbare completă a gamei de culori. Indiferent de opțiunea selectată, scrierea scenariului va avea în continuare aceeași valoare.
Dacă mai multe dintre aceste butoane sunt combinate într-un grup, este convenabil să se aranjeze o astfel de structură în memorie ca o matrice de obiecte de imagine cu opțiunile corespunzătoare numerotarea și denumirea, necesară într-o matrice de control. În lista 7.2 este prezentat un exemplu de comandă de array pentru cele patru butoane de comandă. Codul afișat în listă este utilizat în cadrul unei aplicații care face pagini de imagini. Aceasta este una dintre cele mai complexe și mai lungi înregistrări din cursul de formare, deci necesită unele clarificări. Astfel de explicații vor fi date direct în cursul afișării listei.
Listing 7.2. Imagini paginare
Numai browserele care funcționează cu obiecte imagine pot încărca imagini în memoria cache. Prin urmare, întreaga secvență corespunzătoare este în interiorul constructului if. în declarația condiționată a cărei disponibilitate a matricei document.images este verificată. În browserele mai vechi, această valoare nu poate fi determinată, ceea ce corespunde unei valori false când se verifică starea în blocul if.
Încărcarea imaginilor în memorie începe cu crearea a două matrice de obiecte de imagine. Într-o matrice, sunt stocate informații despre imaginile folosite pentru butoanele în starea inactivă (dezactivată). Celălalt conține imagini ale butoanelor active (în stare pornită). În aceste tablouri, indicii folosesc șiruri de caractere în loc de numere întregi. Numele de șir corespund acelor nume care sunt atribuite obiectelor grafice vizibile ale căror descriptori sunt enumerate în codul sursă de mai jos. În acest caz, codul este mai simplu de înțeles. De exemplu, intrarea offImgArray ["play"] face foarte clar ce este acest element. După cum se poate observa în continuare din listă, este de pompare imaginile nu sunt în conflict cu alte modele afișate pe pagina (acest lucru este posibil în cazul în care link-ul de pe imaginile afișate doar indicii numerice sunt folosite pentru pompare).
După crearea unei matrice și atribuirea de primele patru elemente ale noilor imagini de obiecte goale, elementele acestei matrice se deplasează din nou pentru a indica în proprietatea src a fiecărui obiect efectuat într-o serie de moduri de a fișiere grafice. Liniile corespunzătoare de cod sunt executate atunci când pagina este încărcată, astfel încât imaginile sunt încărcate imediat în zona corespunzătoare a cache-ului.
După cum se poate observa din următorul fragment de HTML-cod atunci când utilizatorul hovers cursorul mouse-ului peste oricare dintre afișate obiectele grafice din document, evenimentul onMouseOver (obiectul documentului) va determina funcția Imageon (). oferindu-i numele unei imagini particulare. Imageon () funcție utilizează acest nume pentru a sincroniza înregistrările document.images array (imaginea afișată) și o serie de imagini în memoria butoanelor onImgArray activă. Proprietatea src a elementelor din această matrice este atribuită proprietăților corespunzătoare src ale imaginilor documentului.
Același lucru se întâmplă atunci când utilizați handlerul de evenimente onMouseOut. care duce imaginea într-o stare "off", care utilizează funcția imageOff () cu aceeași valoare a indexului ca parametrul.
În acest exemplu, funcțiile de gestionare enumerate mai jos nu sunt implicate, dar ele conțin în continuare operatori goi. Acest lucru se face pentru ca funcțiile să capteze toate apelurile făcute atunci când activează linkuri orientate spre imagini.
Fiecare imagine este înconjurată de un obiect de referință. Aceasta se întâmplă deoarece obiectul de referință are instrucțiuni de manipulare a evenimentelor necesare pentru a seta răspunsul scriptului la manipularea de către utilizator a mouse-ului, iar acest lucru permite documentului să fie compatibil cu NN3. Fiecare handler de evenimente onMouseOver apelează funcția imageOn (). în timp ce transmite numele obiectului pompat al imaginii. Deoarece ambele handlers onMouseOver și onMouseOut trebuie să utilizeze expresia adevărată returnează. astfel încât procesul este pornit, apelarea celei de-a doua funcții setMsg () este combinată cu cerința de returnare adevărată. Funcția setMsg () întoarce întotdeauna adevărat. iar prezența cuvântului cheie returnat înainte de a apela această funcție asigură rezultatul dorit. Acest lucru reduce pur și simplu cantitatea de cod utilizat, asta e tot.
Când introduceți această listă și apoi o utilizați, ar trebui să vă asigurați cu atenție că fiecare descriptor <А> Împreună cu atributele sale a fost localizat într-o singură linie.
Pentru a vedea executarea acestui scenariu lung, desenați butoanele potrivite. Când este gata, efectuați (dacă este necesar) modificările necesare ale scriptului. Este mai bine să vă înscrieți înscrierea pe cont propriu. Numai atunci va fi posibil să simțiți întregul farmec al creării unui scenariu.
Mai mult dinamism în HTML
Tehnologia de schimbare a obiectelor de imagini este doar o cunoaștere preliminară a dezvoltărilor disponibile în prezent în format HTML dinamic (Dynamic HTML sau DHTML). În browserele IE4 + și NN6 +, puteți modifica stilul și conținutul elementelor HTML. Tot conținutul poate literalmente "dansa" pe pagină.
Pentru motivul pentru care de mai mulți ani, Microsoft și Netscape folosesc abordări fundamental diferite pentru dezvoltarea modelului obiect de document, numai în browsere IE5 și NN6, ca urmare a trecerii la standardul W3C DOM, a devenit posibil să se utilizeze același cod de script DHTML în ambele tipuri de browsere. Dar chiar și așa, IE5 și IE5.5 nu acceptă standardul W3C DOM în măsura în care o face NN6. În cazul în care publicul vizat, care a proiectat script-ul folosește practic IE, aveți posibilitatea să utilizați o opțiune care vă permite să pună în aplicare modelul de obiect Microsoft, compatibil cu browsere jos pentru ie4 (cu excepția unor probleme de compatibilitate pentru ie4 în Macintosh).
Astfel se termină ultima lecție (lecție!) Din acest manual. Dacă ați studiat cu fidelitate tot ceea ce a fost menționat mai sus și ați introdus cu diligență liniile de cod propuse, atunci sunteți gata să vă aruncați cu capul în jos în scrierea de scripturi. Bineînțeles, bazele pe care le-am dat paginilor conducerii nu sunt în mod clar suficiente pentru munca productivă, dar promit că în viitorul apropiat voi publica informații de natură de referință și câteva articole. Toate acestea vă vor ajuta și de mai multe ori.
Vă doresc mult noroc!
Articole similare
Trimiteți-le prietenilor: