Rollover (okretanje) je u prošlosti jedan od najčešće korištenih vizualnih efekata kod kojih se rabio JavaScript (danas se češće rabi CSS).
To je efekt kad se slika (obično je to slika s tekstom koja stoji u izborniku) promijeni u trenutku kad korisnik postavi pokazivač miša na tu sliku.
<img
src="izbor_a.gif"
onmouseover="roll(this, 'izbor_b.gif');"
onmouseout="roll(this, 'izbor_a.gif');"
/>
Napisana je funkcija koja postavlja argument src za određeni objekt (u našem slučaju je to this, tj. objekt na kojem se dogodio događaj).
function roll(oImg, sNewSrc) {
oImg.src = sNewSrc;
}
Uporabom iste funkcije može se upravljati i drugim objektima.
Na primjer, napravi se mali album:
<table border="0" align="center">
<tr>
<td colspan="3"><img name="velikaslika" src="slika_a.gif"></td>
</tr>
<tr>
<td class="hot_spot" onmouseover="roll(document.velikaslika, 'slika_a.gif');">Slika A</td>
<td class="hot_spot" onmouseover="roll(document.velikaslika, 'slika_b.gif');">Slika B</td>
<td class="hot_spot" onmouseover="roll(document.velikaslika, 'slika_c.gif');">Slika C</td>
</tr>
</table>
Ponekad postoji potreba da se na osnovi određenih kriterija (npr. jezik u kojemu su stranice pisane ili vrsta preglednika kojom se korisnik služi) korisnici upute na druge stranice.
U tu svrhu rabi se preusmjeravanje pomoću objekta location i njegovog svojstva href:
<div>
<input type="button" value="SRCE" onclick="location.href = 'http://www.srce.hr/';" />
</div>
<div>
<input type="button" value="CARNet" onclick="location.href = 'http://www.carnet.hr/';" />
</div>
Objekt window omogućuje rukovanje prozorom preglednika.
Rukovanje trenutačnim prozorom preglednika često su zlorabili oglašivači pa je u današnjim preglednicima moguće isključiti odziv na mijenjanje izgleda prozora preglednika.
Zato je u primjeru prvo potrebno otvoriti novi prozor da bi se mogla mijenjati njegova svojstva:
<form name="frm_win" action="">
<input type="button" value="Novi prozor" onclick="novi();" />
<br />
<input type="text" name="wd" value="800" size="3" maxlength="3" />
<input type="text" name="ht" value="600" size="3" maxlength="3" />
<input type="button" value="Veličina" onclick="velicina();" />
<br />
<input type="text" name="wd_by" value="-20" size="3" maxlength="3" />
<input type="text" name="ht_by" value="-40" size="3" maxlength="3" />
<input type="button" value="Promijeni veličinu za" onclick="promijeniZa();" />
<br />
<input type="text" name="x" value="300" size="3" maxlength="3" />
<input type="text" name="y" value="300" size="3" maxlength="3" />
<input type="button" value="Pomakni" onclick="pomakni();" />
<br />
</form>
Pomoću ovih se funkcija JavaScripta upravlja stanjem preglednika:
var oProzor;
function novi() {
oProzor = window.open("", "", "width=250, height=250");
oProzor.moveTo(300, 400);
}
function velicina() {
oProzor.resizeTo(document.frm_win.wd.value,
document.frm_win.ht.value);
oProzor.focus();
}
function promijeniZa() {
oProzor.resizeBy(document.frm_win.wd_by.value,
document.frm_win.ht_by.value);
oProzor.focus();
}
function pomakni() {
oProzor.moveTo(document.frm_win.x.value,
document.frm_win.y.value);
oProzor.focus();
}
Često je potrebno kakav sadržaj (najčešće hijerarhijski organiziran sadržaj) prikazati u novom prozoru.
To se postiže uporabom funkcije window.open koja ima općeniti oblik:
var oWin = window.open("<URL>", "<naziv_prozora>", "<parametri>");
Treći argument je niz znakova u kojem su zapisani parametri kao parovi ključa i vrijednosti (width=100, height=50).
Od parametara su najzanimljiviji:
Sljedećim obrascem kontrolira se izrada novog prozora:
<form name="frm_win" action="">
Novi prozor:
<br/>
<input type="checkbox" name="menubar" />
Prikaži izbornik (Menubar)<br />
<input type="checkbox" name="location" />
Prikaži adresno polje (Location)<br />
<input type="checkbox" name="resizable" />
Dozvoli promjenu veličine (Resizable)<br />
<input type="checkbox" name="scrollbars" />
Prikaži trake za pomak (Scrollbars)<br />
<input type="checkbox" name="status" />
Prikaži statusno područje (Status)<br />
<input type="checkbox" name="toolbar" />
Prikaži alatnu traku (Toolbar)<br/>
Širina: <input type="text" name="wd_new" value="" size="3" maxlength="3" />
<br />
Visina: <input type="text" name="ht_new" value="" size="3" maxlength="3" />
<br/>
<input type="button" value="Novi prozor" onclick="newWin();" />
</form>
Ovim se programom JavaScripta izrađuje novi prozor:
function newWin() {
var sOptions = 'menubar=';
sOptions += document.frm_win.menubar.checked ? '1' : '0';
sOptions += ',location=';
sOptions += document.frm_win.location.checked ? '1' : '0';
sOptions += ',resizable=';
sOptions += document.frm_win.resizable.checked ? '1' : '0';
sOptions += ',scrollbars=';
sOptions += document.frm_win.scrollbars.checked ? '1' : '0';
sOptions += ',status=';
sOptions += document.frm_win.status.checked ? '1' : '0';
sOptions += ',toolbar=';
sOptions += document.frm_win.toolbar.checked ? '1' : '0';
if (document.frm_win.wd_new.value !== '') {
sOptions += ',width=' + document.frm_win.wd_new.value;
}
if (document.frm_win.ht_new.value !== '') {
sOptions += ',height=' + document.frm_win.ht_new.value;
}
window.open("", "new_win", sOptions);
}
Sljedeća tablica navodi sve jQuery metode koje se koriste za obradu događaja: