e-gradiva				HTML	CSS	JavaScript	Načrtovanje
						SERŠ Maribor		Iskanje	Primeri

Predmet Image

Preden podrobno spregovorimo o slikah kot o predmetih, je pomembno razumeti razliko med statičnimi predmeti Image in elementi predmet img. Prvi obstaja le v spominu brskalnika brez da bi se kazal uporabniku; drugi pa so elementi na strani ustvarjeni z elementom HTML <img>. Skripti uporabljajo slikovne predmete za prednalaganje slik za stran. Slikovni predmeti pa imajo še več uporabnih lastnosti, postopkov, ker niso vidljivi niti na strani niti nanje ne vplivajo atributi značke.

Elementi img so del HTML že od samega začetka. Toda šele Netscape Navigator 3 je bil prvi, ki je z njimi ravnal kot osnovnimi predmeti skupaj z slikovnimi objekti za prednalaganje slik. Vsi brskalniki IE4+ in NN6+ ravnajo z elementi img kot s pravimi dokumentnimi predmeti. Največja prednost takšnega pristopa z elementi img kot s predmeti je, da lahko skript spremeni sliko, celo potem, ko je dokument naložil in prikazal začetno sliko. Ključ do te sposobnosti skripta je lastnost slike src.

Običajno stran naloži neko začetno sliko. Posebnost slikovne značke img so dodatne lastnosti, kot sta height in width (ki pospešita prikaz slike na strani). Medtem ko je uporabnik nekaj časa na strani, se lahko slika spremeni (morda v odgovor uporabnikovemu dejanju ali pa glede na časovno določen dogodek v skriptu) in nadomesti originalno sliko z novo v istem prostoru.

V brskalnikih pred IE4 in NN6, ki podpirajo elementne predmete img, višina in širina začetne slike, ki se nalaga v element, ustvari točno določeno velikost pravokotnika za sliko. Poskusi, da bi se v ta prostor prilegala slika druge velikosti, prisili sliko, da spremeni velikost (se poveča ali zmanjša, odvisno od primera) tako, da se prilagaja pravokotniku. V IE4+ in NN6+ se velikost prilagodi s samodejnim ponovnim pretokom vsebine strani okoli različne velikosti.

Prednost ločenega predmeta Image je ta, da lahko skript ustvari navidezno sliko in jo zadrži kot prednaloženo sliko. (Slika se naloži v predpomnilnik, brskalnik pa slike ne prikaže) Predpostavlja se, da se bo ena ali več slik naložila v pomnilnik, medtem ko je uporabnik zaposlen z branjem strani ali pa čaka, da se stran naloži. Nato se lahko, v odgovor uporabnikovemu dejanju na strani, slika hitro zamenja, kar je boljše kot pa da je uporabnik prisiljen čakati, da se slika naloži na zahtevo.

Konstruktorji

Konstruktor new Image(sirina, visina)

Če želimo prednaložiti slike moramo najprej dodeliti nov, prazen slikovni objekt kot globalno spremenljivko. Nova slika je narejena preko konstruktorja, ki je na voljo za slikovni predmet:

var slikovnaSpremenljivka = new Image(širina,višina)

Z določitvijo širine in višine prednaložene slike v konstruktorju funkcije, lahko brskalniku olajšate dodelitev spomina za sliko. Vse kar ta stavek naredi je, da kreira predmet v spominu z lastnostmi, ki so prazne. Da prisilimo brskalnik v prednalaganje slik, dodamo k sliki lastnost src:

var prvaSlika = new Image(55,68)
prvaSlika.src = "nekaSlika.gif"

Ko se ta slika nalaga, se v statusni vrstici prikaže kot vsaka druga slika. Kasneje dodajte src lastnost tej prednaloženi sliki k elementu img, ki se na straneh prikaže kot:

document.images["nekaSlika"].src = prvaSlika.src

→ primeri

Lastnosti

Lastnost alt

Lastnost alt omogoči spremembo teksta ki ga brskalnik prikaže v pravokotnem prostoru, namenjenemu slikam (seveda, če sta širina in višina določeni) preden se slika naloži k odjemalcu. Seveda pa tudi, če ima brskalnik onemogočeno prikazovanje slik (ali je tega nezmožen), se bo na mesto slik napisal tekst in s tem pripomogel nemoteno ogledovanje spletnih strani. Lastnost alt se lahko spremeni tudi potem, ko je stran že naložena.

Lastnost complete

Tu pa tam se zgodi, da nekaj slik ne bi smelo biti v procesu nalaganja, ker jim lahko kak drugi proces zavzame njihovo mesto. Situacija je drugačna kot čakanje pri nalaganju slik, predenj se sproži izvajanje drugi procesov (kar lahko storite z upravljalnikom dogodkov onload). Da preverimo, če predmet img prikazuje končno sliko, se preveri logično vrednost lastnosti complete. Za preverjanje, če se je določena slika že naložila, se najprej pogledamo, če ima lastnost complete vrednost true. Naslednja zelo pomembna lastnost je, da primerja lastnost src želene datoteke. Lastnost complete se postavi na true tudi, kadar se dokončno naloži slika določena z lastnostjo lowsrc. Vsekakor se na to lastnost ne smemo preveč zanašati, saj se je lahko naložila slika z lastnostjo src ali pa samo lowsrc v znački img.

Lastnost height
Lastnost width

Lastnosti height in width vračata velikost in (v novejših brskalnikih) spreminja višino in širino v pikslih določenega predmeta. Če se sliki določi samo eno lastnost višine, brskalnik avtomatsko nastavi sliko v istih razmerjih kot original. Spreminjanje merila slike lahko povzroči nehote poslabšanje kvalitete slike, zato je potrebno biti pri spreminjanju meril slik izredno pazljiv.

Lastnost lowsrc

Za slikovne datoteke, ki rabijo več časa za nalaganje, imajo novejši brskalniki omogočeno, da lahko definiramo nižjo resolucijo slike ali pa nek direktorij iz katerega se hitro naloži. Ta opcija se najprej izvede tačas pa od zadaj prihaja velika slika k brskalniku. Sliko povežemo z lastnostjo lowsrc v znački img. Lastnost je potem predstavlja lastnost lowsrc predmetu Image.

Lastnost src

Lastnost src je pot do vnaprej naloženih slikah (npr. slikovni objekti, ki so shranjeni v spominu) in izvaja izmenjavanje slik. Dodelitev URL k lastnosti src predmeta Image v pomnilniku povzroči, da brskalnik naloži sliko v brskalnikovo zalogo (pod pogojem, da ima uporabnik to opcijo omogočeno). Dodelitev URL k src lastnosti src elementa img povzroči, da element pokaže novo sliko. Da bi izkoristili to močno kombinacijo, moramo najprej naložiti različice slik v slikovni predpomnilnik in nato dodeliti lastnost src predmeta Image ali src lastnosti src želenega elementa img. V vseh novejših brskalnikih, se element img preoblikuje tako, da se prilagodi velikosti slike. Ko se bere lastnost src, običajno vrne celoten naslov URL slike s protokolom in s potjo. To običajno ni najbolje.

Lastnost ismap

Lastnost ismap omogoča, da katerakoli slika deluje kot nekakšen slikovni zemljevid na spletnih straneh. Ko se določi slikovni zemljevid, se enostavno določi koordinate v pikslih, ki so parametri katerega koli href, ki obkroža sliko.

Lastnost usemap

Lastnost usemap predstavlja lastnost usemap elementa img, ki kaže na ime, ki je dodeljeno k elementu area na strani. Ta element area vsebuje podrobne podatke slikovnega zemljevida na odjemalčevi strani. Vrednost lastnosti usemap lastnost mora vsebovati oznako #, ki definira interno povezavo na strani HTML. Če je potrebno zamenjati dva ali več slikovnih zemljevidov za istega elementa img, se lahko določi več elementov map, vsakega s svojim imenom. Nato je potrebno spremeniti vrednost lastnosti usemap za element img tako, da ta poveže različne zemljevide s sliko.

 Gor     e-gradiva     JavaScript      Prednalaganje slik   Slogovne predloge 

SERŠ Maribor : Strokovna gimnazija : 2004 : Rok Arnuš