| CATEGORII DOCUMENTE |
Pozitionarea obiectelor HTML in document
"Obiect" este un termen generic pentru toate lucrurile ce se vad pe ecran la afisarea paginii web, si sunt create de browser in functie de codul HTML. Pot fi impartite in urmatoarele structuri:
obiect singuar ("elementele HTML". si altele)
grup de obiecte (incapsulate in <DIV> </DIV>
ierarhie de obiecte (<DIV> </DIV> reincapsulate)
In HTML un obiect este un element "block" (ca un paragraf
<P > . . . </P>, un tabel <TABLE > . . . </TABLE> etc.). Unele obiecte sunt reprezentate prin eticheta insasi, exemplu fiind o imagine <IMG >
Pozitionare este abilitatea de a plasa elementele HTML la o anumita locatie bine definita in document, prin coordonatele x, y si z. Asta inseamna ca se pot plasa elemente - imagini, controale, text etc. - exact unde dorim si astfel obtinandu-se efecte speciale prin definirea intr-o ordine speciala.
Pozitionarea este o extensie a CSS. Asta insemnand ca se poate specifica pozitia unui element prin alegerea atributelor CSS corespunzatoare pentru acel element. Mai mult DHTML suporta pozitionarea si animarea elementelor chiar dupa ce un document a fost incarcat. Deoarece modelul obietului permite accesul la stiluri si la style sheets, se poate scimba pozitia unui element lafel de simplu cum se poate schimba culoarea acestuia. Aceasta constituie un avantaj, si face foarte simpla, schimbarea pozitiilor elementelor bazate pe cum va vizualiza utilizatorul acel document, si chiar se pot anima elementele. Pentru animatii, tot ce este necesar este modificarea pozitiei unui element la un interval. De exemplu, urmatorul document prezinta o imagine care se plimba la inceputul documentului si se opreste in coltul din stanga sus.
<HTML>
<HEAD><TITLE>Dynamic Positioning</TITLE>
<SCRIPT LANGUAGE='JScript'>
var id;
function StartGlide()
function Glide()
</SCRIPT>
<BODY onload='StartGlide()'>
<H3>Welcome to Dynamic HTML!</H3>
<P>With dynamic positioning, you can move images anywhere in the document even while the user views the document.
<IMG ID='Banner' STYLE='visibility:hidden; top:0; left:0; z-index:-1' SRC='GREEN-BALL.GIF'>
</BODY>
</HTML>
Pozitionarea se poate face automat, de catre browser sau explicit. Pozitionarea explicita se imparte la randul ei in dinamica si statica.
Cea statica se realizeaza prin modificarea VISIBILITY, DISPLAY, Z, si alte atribute STYLE. Cea dinamica, prin TOP si/sau LEFT.
Majoritatea obiectelor pot fi pozitionate prin folosirea unui atribur STYLE. De exemplu daca se doreste pozitionarea la dreapta:
<object_type STYLE=' top: ; left: '> . . . </ object_type>
Schimbarea VISIBILITY:
<object_type ID=..id.. STYLE=' top:; left:; visibility:hidden'> . . . </object_type>
// pentru ca obiectul sa nu mai fie vizibil in pozitia initiala
<BUTTON onclick='change_visibility(id)' > . . . </BUTTON>
// un buton care isi scimba vizibilitatea, apeland id
iar functie:
function change_visibility(obj)
Astfel nu se schimba pozitia, ci doar vizibilitatea lui, si butonul va avea un efect de revenire dupa click.
Schimbarea DISPLAY este similara cu cea precedenta:
<object_type ID=..id.. STYLE=' top:; left:; display:none'> . . . </object_type>
Iar butonul va arata de genul:
<BUTTON onclick='change_display()' > . . . </BUTTON>
si functia corespunzatoare:
function change_display()
else }
Astfel cand butonul va fi apasat obiectul va fi afisat, iar obiectele din documentul HTML se vor muta mai jos. La a doua apasare obiectul dispare si documentul isi revine in starea initiala.
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1218
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
