| MAPIRANE SLIKE |
Podsetnik na HTML dizajn mapirane slike na strani klijenta
< a href="nekilink.htm" onMouseOver="window.status='Zona 1'; return true;" >Ako se želi kreirati mapa na strani klijenta:
(Ovo je primer jedne mape koja poseduje "menije" za izbor zona)<HTML>
<HEAD> <title>Java Script skola; Mapiranje slika</title>
<script LANGUAGE="JavaScript">
function update(t) {
document.form1.text1.value = t;
}
</script>
</head><body>
<map NAME="map1">
<area SHAPE=RECT COORDS="14,15,151,87" onClick="update('prva zona');"
onMouseOver="window.status='Zona 1'; return true;">
<area SHAPE=RECT COORDS="162,16,283,85" onClick="update('2. zona');"
onMouseOver="window.status='Zona 2'; return true;">
<area SHAPE=RECT COORDS="294,15,388,87" onClick="update('treća zona');"
onMouseOver="window.status='Zona 3'; return true;">
<area SHAPE=RECT COORDS="13,98,79,178" onClick="update('zona br. 4');"
onMouseOver="window.status='Zona 4'; return true;">
<area SHAPE=RECT COORDS="92,97,223,177" onClick="update('zona br. 5');"
onMouseOver="window.status='Zona 5'; return true;">
<area SHAPE=RECT COORDS="235,98,388,177" onClick="update('šesta zona');"
onMouseOver="window.status='Zona 6'; return true;">
<area SHAPE=default onClick="update('Bez izabrane zone');"
onMouseOver="window.status='Izaberite zonu'; return true;">
</map>
<h1 align="center">Mapa slike na strani klijenta</h1>
<hr>
Naredna mapa slike koristi JavaScript funkcije u svojim zonama. Kretanjem kroz zone
prikazuju se informacije u statusnoj liniji. Odabiranje zone klikom navodi se naziv zone u tekstualnom polju ispod mape.
<hr>
<p align="center" Alt="mapirana slika" border="2">
<img SRC="imagemap.gif" USEMAP="#map1">
<hr>
<FORM NAME="form1">
<b>Odabrana zona:</b>
<input TYPE="text" NAME="text1" VALUE="Izaberite zonu">
</form>
<hr></body>
</HTML>Datoteka pr61.htm
Postoje dva tipa mapiranih slika:
na strani klijenta (radi rasterećenja servera, linkovana oblast slike je definisana unutar HTML dokumenta)
na strani servera (HTTP serveru se prenose koordinate zona na koju se kliknulo, na osnovu kojih on vraća dokument čije dovlačenje je zahtevano; ovaj način implementacije opterćuje server, korisnik ne vidi tačan URL zahtevanog dokumenta, a kod starog načina mapiranja mapa slike i povezani URL-ovi su se nalazili na serveru, te je format mape slike zavisio od HTTP servera)
Java Script mehaniyam mapiranja na strni klijenta:
1. kreiranje mape (GIMP, PhotoShop, Paint,...)
2. definisanje mape upotrebom taga MAP (videti primer iz prethodne škole; definisati koordinate i oblik zona...)
3. uključiti mapiranu sliku u dokument upotrebom taga IMG i atributa USEMAP (videti primer iz prethodne škole)
4. PRIMER 61 koristi
onMouseOver
onClick
Jedan od tipičnih načina za obradu događaja pomeranja pokazivača miša preko linka jeste prikaz poruke u statusnoj liniji. Na primer:
return true; iskaz je neophodan da spreci da se statusna linija (sa URL-om) prepise nakon prikaza URL-a, tj. ne postoji nacin da poruku window.status brisete dok ne bude prikazana (npr. sa window.sttus=" ");
Jedan
od tipičnih načina za obradu događaja pritisnutog taster miša preko linka
jeste poziv potprogram koji izdaje neku poruku. Na primer:
<
a href="nekilink.htm" onClick="update('prva
zona');" >
Link
</A>
Dakle, onClick procedura za obradu dogadja se pokrece pre strane sa
linkom koja je ucitana unutar pretrazivaca. Ova je, uglavnom, korisno ako
se prave uslovne hiperveze ili ako se zeli prikazati odbijanje pre pokretanje
strane sa linkom.
U PRIMERU 61 se upotrebom onClick zeli izbeci osobina novijih browser-a,
a to je neprikazivanje opisa u statusnoj liniji mapirane slike, ako je
ukljucen atribut HREF.
Korisnička funkcija update šalje
argument (vrednost niske t u definiciji zona mapa) u polje za tekst koje
je imenovano sa form1. text1, a nativ polja form 1 se kasnije navodi i
u telu dokumenta, tj.
<FORM NAME="form1">,
odnosno
imenuje naziv NAME=...
<input TYPE="text" NAME="text1"
VALUE="Izaberite zonu">
| Dinamika slike: RollOver / prelaz preko slike |
Želite li da se prikaz slike na Web strani menja zavisno od prelaza mišem, onda:Dinamične slike su podržane kao deo JavaScript 1.1 počev od NN 3.0, IE 4.0
<HTML>
<HEAD></HEAD>
<BODY>
Primer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana....<br>
<h1 align="center">Rollover efekat</h1>
<hr>
Naredne slike ce se promeniti prelaskom miša preko nje.
<br>Inače, obe slike su hiperveze, tj. veze ka drugim objektima (kliknite !).<p>
<a href="skolajs0.htm"
onMouseOver="document.images[0].src='zad31.gif';"
onMouseOut="document.images[0].src='zad32.gif';">
<img src="zad31.gif" alt="" border="0">
</a>
<P> </p><p align="center">
<a href="skolajs0.html"
onMouseOver="document.images[1].src='dstrela.gif';"
onMouseOut="document.images[1].src='lstrela.gif';">
<img src="lstrela.gif" alt="" border="0">
</a>
</BODY>
</HTML>Datoteka pr62.htm
Korisna osobina JavaScript-a je dinamična promena slika (na primer: jednostavne animacije izmena slika prelaskom miša, prekrivanje i otkrivanje časovnika i kalendara,...)
Prikaz slika na Web strani se odvija u nizu. Izmenom članova niza, jedna slika se može zameniti drugom, tj. sadržaj se može dinamički menjati i bez upotrebe layer-a. ALI, ovim mehanizmom se mogu samo izmeniti postojeće slike, ali se ne mogu dodavati nove slike. Takođe, ma koja slika se učitava sa servera, što može biti neefikasno za veće slike ili animacije.
Svaki image objekat je dete document objekta. NIZ images
Svaki image objekat poseduje osobine: (primer slika iz prethodne skole)
border
complete (true/false)
height, width
hspace, vspace
name
src
Najvaznija ( i najcesca) osobina jeste osobina src.Objekat image ne poseduje metode.
Postoje tri procedure za obradu koje su u upotrebi:
dogadjaj onLoad se dešava nakon učitavanja slike
dogadjaj onAbort se dešava ako posetilac prekine učitavanje strane pre učitavanja slike
dogadjaj onError se dešava ako nije pronađena datoteka sa slikom ili je nekorektna
Unos slike unapred
Kako se obezbediti u radu sa slikama čak i ako se radi sa brzinom modema? Kreirati image objekat (naredba new), oderditi sliku koja će se učitati i smestiti je u keš memoriju.
Slika=new Image();
Slika.src="fotografija1.gif"
PRIMER 62 koristi<a href="skolajs0.html"
onMouseOver
onMouseOut
Jedan od tipičnih načina za obradu događaja pomeranja pokazivača miša preko i van slike koja je hiperveza jeste da svaki link sadrzi dogažaje onMouseOver i onMouseOut koji menjaju sliku:
onMouseOver="document.images[1].src='dstrela.gif';"
onMouseOut="document.images[1].src='lstrela.gif';">
LINK
</A>
| PRIMER ANIMACIJE |
<html>
<head>
<title> JavaScript: osnove animacije</title>
<script LANGUAGE="JavaScript">
/* globalne promenljive */
var tekSlika=0;
var pozDesnogDela=1;
var redniBrojSlike=0;
var redniBrojVireceSlike=0;
/* funkcija koja ucitava delove animacije 1 slajd unapred */
function prikaz() {
a1 = new Image();
a1.src = "bubica1.gif";
a2 = new Image();
a2.src = "bubica2.gif";
a3 = new Image();
a3.src = "bubica3.gif";
a4 = new Image();
a4.src = "bubica4.gif";
a5 = new Image();
a5.src = "bubica5.gif";
a6 = new Image();
a6.src = "bubica6.gif";
a7 = new Image();
a7.src = "bubica7.gif";
a8 = new Image();
a8.src = "bubica8.gif";
window.setTimeout("next();",800);
}/* funkcija koja pomera animaciju na sledeci slajd */
function next() {
redniBrojSlike += 1;
if (redniBrojSlike > 8) {
redniBrojSlike = 4;
document.images[tekSlika].src = "bubica0.gif";
tekSlika = (tekSlika + 1) % 5;
pozDesnogDela = (tekSlika + 1) % 5;
}
redniBrojVireceSlike = redniBrojSlike - 5;
if (redniBrojVireceSlike <= 0) redniBrojVireceSlike = 0;
document.images[tekSlika].src = "bubica" + redniBrojSlike + ".gif";
document.images[pozDesnogDela].src = "bubica" + redniBrojVireceSlike + ".gif";
window.setTimeout("next();",50);
}
</script>
</head>
<body onLoad="prikaz();">
<H1 align="center"> Primer animacije u skriptu</H1>
<HR>
<center>
<img src="bubica0.gif" width=120 height=120 alt="" border="0">
<img src="bubica0.gif" width=120 height=120 alt="" border="0">
<img src="bubica0.gif" width=120 height=120 alt="" border="0">
<img src="bubica0.gif" width=120 height=120 alt="" border="0">
<img src="bubica0.gif" width=120 height=120 alt="" border="0">
</center>
<HR>
</body>
</html>
Datoteka pr63.htm
Java Script i animacije:
uključiti animirani GIF koji se neprekidno ponavlja
kreirati skript koji pokreće animaciju u vidljivom
području navigatora
1. krirati sedam slika bubice, predvideti i nultu
sliku koja ne prikayuje bubicu (tj. situacija kada bubica nije u navigatoru)
2. kreirati HTML dokument koji uljucuje pet puta
prikaz nulte slike (broj pet, jer ce niz images imati slajdove tj. članove
od 0..4 koji ce se izmenjivati)
3. kako nulta slika je prazna, to se na pocetku ne vidi
nista
<H1 align="center"> Primer
animacije u skriptu</H1>
<HR>
<center>
<img src="bubica0.gif" width=120
height=120 alt="" border="0">
<img src="bubica0.gif" width=120
height=120 alt="" border="0">
<img src="bubica0.gif" width=120
height=120 alt="" border="0">
<img src="bubica0.gif" width=120
height=120 alt="" border="0">
<img src="bubica0.gif" width=120
height=120 alt="" border="0">
</center>
<HR>
Globalne promenljive:
var tekSlika=0;
/* sadrzi vrednosti 0..4, oynacava redni vroj slike bubice koja je trenutno
pokrenuta */
var pozDesnogDela=1;
/* cuva poziciju desnog dela pokrenute slike, jer deo pterhodne slike moye
da viri u sledecoj */
var redniBrojSlike=0;
/* cuva vrednos 1..8, to su delovi bubice koje se prikayuju u tekucem slajdu
*/
var redniBrojVireceSlike=0;
/* 1..8. cuva ako je potrebno redni broj slike bubice koji viti u sledecem
slajdu */
Pomeranje slike bubice na sledeci slajd
Metod setTimeOut neprekidno poziva f-ju next u f-ji prikaz (800)
if (redniBrojSlike > 8)
{
redniBrojSlike = 4;
document.images[tekSlika].src = "bubica0.gif";
tekSlika = (tekSlika + 1) % 5;
pozDesnogDela = (tekSlika + 1) % 5;
}
ako tekuca slika ima redni broj
>8, onda se ciklicki pomeraju vrednosti za tekSlika i pozDesnogDela (tako
da polzaj ne moze postati veci od rednog broja 4),
dok
redniBroj Slike=4 (jer je tekuce
polje pre narednog polja za prikaz vec preslo slike 1,2,3)
redniBrojVireceSlike
= redniBrojSlike - 5;
if (redniBrojVireceSlike
<= 0) redniBrojVireceSlike = 0;
izracunava se slika prikaza u
narednom polju, tj. slike 6, 7, 8 se poklapaju sa slikama 1, 2, 3 tokom formiranja
bubice, pa je zato
redniBrojVireceSlike
= redniBrojSlike - 5;
Ako se pri tom zadesila negativna
vrednost u redniBrojVireceSlike, onda se ona postavi na nula.