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

Slike

JavaScript ima dostop do opisov vseh slik, ki so vključene v dokument HTML. Opisi slik so zbrani v zbirki document.images. Vsak element te zbirke je predmet, ki opisuje eno sliko. Lastnosti tega predmeta so: src, width, height, align, alt, longdesc, ismap, usemap, ki imajo enake pomene kot istoimenske lastnosti značke img, s katero se sliko vključi v dokument HTML.

Obstoječo sliko v HTML se lahko nadomesti z drugo sliko na zelo preprost način. Dovolj je spremeniti vrednost njene lastnosti src. Če predpostavimo, da smo sliko poimenovali z imenom slika, lahko napišemo:

document.getElementById("slika").src = "slika.gif"

Če na tak način zamenjamo sliko, jo bo brskalnik moral najprej naložiti v pomnilnik, šele potem jo bo lahko prikazal, kar lahko ima neprijetne posledice, saj je včasih nalaganje slike časovno kar precej zahtevno. Zato je priporočljivo, da se sliko naložimo že prej. To se naredi tako, da se ustvarimo nov predmet Image, v katerega se naloži sliko. Taka slika bo shranjena samo v pomnilniku, na zaslonu pa ne bo vidna.

var slika = new Image(širina, višina)
slika.src = "slika.gif"

Širine in višine ni potrebno navesti. Lastnosti height in width nudita nadzor nad višino in širino slikovnega predmeta. Lastnosti je mogoče spreminjati. . Če se jih ne navede, bo brskalnik sam izračunal. Če se sliki določi pravo višino in širino, bo brskalnik rezerviral ustrezen prostor v dokumentu brez preračunavanja. Če se sliki ne določi prave višine in širine, bo brskalnik sliki v dokumentu spremenil velikost. V primeru nastavitve samo ene dimenzije, se druga sorazmerno preračuna.

Obstoječo sliko v HTML potem nadomestimo z drugo z ukazom:

document.slika.src = slika.src

Pogosto se to uporablja za t.i. mouse rollover, pri katerem se slika zamenja, ko uporabnik premika miškin kazalec po ekranu.

Slikovni predmet

Slikovni predmet je eden izmed predmetov. Na nesrečo je to eden izmed predmetov, ki ni dostopen vsem skriptnim brskalnikom. NN3 in IE4 sta najstarejša brskalnika, ki še podpirata to zmožnost.

Ker je lahko v dokumentu več slikovnih predmetov, je sklicevanje na le te mogoče preko množice pripadajoče osnovnemu dokumentu. Sklic na sliko je lahko torej preko indeksa ali imena. Pri tem je lahko indeks tudi niz z imenom slike. Veljavni sklici na slikovni predmet so torej:

document.images[n]
document.images["ImeSlike"]
document.ImeSlike

Vsak od atributov <img> je dosegljiv z JavaScript kot lastnost slikovnega predmeta. V starejših brskalnikih nobeden dogodek v zvezi z miško ni neposredno povezan z slikovnim predmetom. Če se želi sliko pretvoriti v predmet na katerega se lahko klika v starejših brskalnikih, jo je potrebno obkrožiti s povezavo (in zmanjšati obrobo slike na nič) ali ji dodati slikovni zemljevid. Kombinacija povezave in slike je način, kako napraviti slikovni gumb, na katerega se lahko klika.

Zamenljive slike

Prednost skriptnih slikovnih predmetov je v tem, da lahko skripta zamenja sliko v že obstoječem kvadratnem prostoru, ki ga zavzema trenutna slika. V IE4+ in NN6+ lahko slike zamenjajo celo velikost tega prostora in se okoliška vsebina k temu primerno prilagodi.

Skripta za zamenjavo slik je precej enostavna. V osnovi samo priredi novi URL v lastnosti src slikovnega predmeta. Velikost slike je uravnana s parametroma height in width, nastavljenima v elementu <img> ob nalaganju strani. Večina zamenjav je iste velikosti kot originalna slika. Starejše različice brskalnikov (NN3- in NN4-) ne morajo spremeniti velikosti slik na strani, zato raztegnejo zamenjano tako, da na strani zavzame isto velikost.

 Gor     e-gradiva     JavaScript      Obrazci   Dostop do slik 

SERŠ Maribor : Strokovna gimnazija : 2004 : Jure Štern