JavaScript

JavaScripti >> Meniji >> Menu #2

Opis:
Zanimiv meni, ki postopoma spremeni barvo, če se z miškinim kazalcem postavite na en prostor v njem. Dadajte le še vaše hyperlinke napisom v meniju in to je to.

Primer:

Prostor 1

Prostor 2

Prostor 3

Prostor 4

Z malo znanja pa lahko ustvarite tudi večji menu. Če bi radi videli primer večjega menuja klikite TUKAJ.

Izvorna koda:
Korak 1:
Prekopirajte ta del kode v <head> del vaše spletne strani:

<script> hex = new Array(8) set = new Array(4) set1 = new Array(0,0,0,0,0) hex[0] = "CCCCCC" hex[1] = "BBBBBB" hex[2] = "AAAAAA" hex[3] = "999999" hex[4] = "888888" hex[5] = "777777" hex[6] = "666666" hex[7] = "555555" hex[8] = "444444" function rollon(n){ if (n==1){set[1]=1} if (n==2){set[2]=1} if (n==3){set[3]=1} if (n==4){set[4]=1} } function rolloff(n){ if (n==1){set[1]=0} if (n==2){set[2]=0} if (n==3){set[3]=0} if (n==4){set[4]=0} } function color(){ if (set[1]==1){ if (set1[1]==8){} else{set1[1]++ ;item1.style.background = hex[set1[1]] } } else { if (set1[1]==0){} else{set1[1]=set1[1]-1 ;item1.style.background = hex[set1[1]] } } if (set[2]==1){ if (set1[2]==8){} else{set1[2]++ ;item2.style.background = hex[set1[2]] } } else { if (set1[2]==0){} else{set1[2]=set1[2]-1 ;item2.style.background = hex[set1[2]] } } if (set[3]==1){ if (set1[3]==8){} else{set1[3]++ ;item3.style.background = hex[set1[3]] } } else { if (set1[3]==0){} else{set1[3]=set1[3]-1 ;item3.style.background = hex[set1[3]] } } if (set[4]==1){ if (set1[4]==8){} else{set1[4]++ ;item4.style.background = hex[set1[4]] } } else { if (set1[4]==0){} else{set1[4]=set1[4]-1 ;item4.style.background = hex[set1[4]] } } setTimeout("color()",100) } </script>

Korak 2:
Prekopirajte ta del kode v <body> del vaše spletne strani:

<table border="1" cellpadding="0" cellspacing="0" bgcolor="cccccc" bordercolor="#000000"> <tr> <td width="100" id="item1" onmouseover="rollon(1)" onmouseout="rolloff(1)"><p align="center" ><font color="cc0000">Prostor 1</p> </td> </tr> <tr> <td id="item2" onmouseover="rollon(2)" onmouseout="rolloff(2)"><p align="center"><font color="cc0000">Prostor 2</p> </td> </tr> <tr> <td id="item3" onmouseover="rollon(3)" onmouseout="rolloff(3)"><p align="center"><font color="cc0000">Prostor 3</p> </td> </tr> <tr> <td id="item4" onmouseover="rollon(4)" onmouseout="rolloff(4)"><p align="center"><font color="cc0000">Prostor 4</p> </td> </tr> </table>

Korak 3:
Vaša <body> vrstica naj bi izgledala nekako takole:

<body onload="color()">