JavaScript – Navigacija u više nivoa

Krstarica 17. maj 2001. 00:00

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 = „https://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>

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.

programiranje