Uz pomoć JavaScript-a možete da dobijete zaista izvanredne navigacione mogućnosti. U sledećem skriptu videćemo kako možemo da izvedemo dinamičku navigaciju na sajtu korišćenjem "onMouseOver" događaja. Šta skript u stvari radi? U našem primeru imamo tri kategorije (kategorizacija stranica) nad kojima se prati događaj "onMouseOver". Kada se on desi dolazi do dinamičke promene dugmadi, i to i naslova (labels) dugmadi i linkova na koje oni vode. Ovim skriptom izbegavamo rollover grafiku, i prevazilazimo ograničenja Netscape-a u pogledu kaskadnih stilova.
Programski kod ćemo detaljnije objasniti, kontekstno. Uz pomoć sledećeg koda kreirajte novi ".htm" fajl:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
// kreiramo nizove koji ce sadrzati sve hiperlinkkove
x=1; //inicijalizacija prve varijable
y=3; //inicijalizacija koja resetuje
//dugmice na onMouseOut
linx = new Array()
//prvi niz linkova najvise kategorije
linx[1] = new Array();
linx[1][1] = "link1";
linx[1][2] = "link2";
linx[1][3] = "link3";
//drugi niz linkova najvise kategorije
linx[2] = new Array();
linx[2][1] = "linkA";
linx[2][2] = "linkB";
linx[2][3] = "linkC";
// funkcija koja popunjava prvi niz dugmadi...
function rollover1() {
document.meni.nav1.value = "Link 1";
document.meni.nav2.value = "Link 2";
document.meni.nav3.value = "Link 3";
document.meni.dummy.value = 1;
x = document.meni.dummy.value;
return(x);
}
// funkcija koja popunjava drugi niz dugmadi...
function rollover2() {
document.meni.nav1.value = "Link A";
document.meni.nav2.value = "Link B";
document.meni.nav3.value = "Link C";
document.meni.dummy.value = 2;
x = document.meni.dummy.value;
return(x);
}
function kreni(hlink) {
// privremena varijabla temp1 za skriveno polje
var temp1 = document.meni.dummy.value;
// privremena varijabla temp2 za niz linkova
var temp2 = (linx[temp1][hlink]);
// konstrukcija celog linka
window.location = "http://www.krstarica.com/"+temp2+".htm";
}
function rollout() {
//
for (var j=0; j<y; j++) {
document.meni.elements[j].value = " ";
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="test1.htm"
ONMOUSEOVER="rollover1()">1. kategorija</A> |
<A HREF="test2.htm"
ONMOUSEOVER="rollover2()">2. kategorija</A> |
<A HREF="test3.htm"
ONMOUSEOVER="rollout()">3.kategorija</A>
<FORM NAME="meni">
<INPUT TYPE="button" NAME="nav1"
VALUE=" " ONCLICK="kreni(1)">
<INPUT TYPE="button" NAME="nav2"
VALUE=" " ONCLICK="kreni(2)">
<INPUT TYPE="button" NAME="nav3"
VALUE=" " ONCLICK="kreni(3)">
<!--- dummy element koji cuva strukturu linkova --->
<INPUT TYPE="hidden" NAME="dummy"
VALUE=""size="3">
</FORM>
</BODY>