Here we are using a set of parallel arrays to display related information.

The arrays are created and loaded in the page header. The function ShowMovie(), also in the header, displays information from this simple "database" in the form Movies, shown below in blue.

The line of graphics is created when the page is loaded by a small JavaScript, shown below in red. We use the modulo ( %) operation to make every fifth ball a different color. Each ball is surrounded by a link whose onMouseover handler calls the ShowMovie() function.

Movie data from IMDB, 27 March 2003.

<script language="JavaScript" type="text/javascript">
<!--
var i = 20 ;

var aTitle = new Array(i);
var aDate = new Array(i);
var aGross = new Array(i);

aTitle[0] = "Titanic" ; aDate[0] = "1997" ; aGross[0] = "$600,743,440" ;
aTitle[1] = "Star Wars" ; aDate[1] = "1977" ; aGross[1] = "$460,935,655" ;
aTitle[2] = "E.T. the Extra-Terrestrial" ; aDate[2] = "1982" ; aGross[2] = "$434,949,459" ;
aTitle[3] = "Star Wars: Episode I - The Phantom Menace" ; aDate[3] = "1999" ; aGross[3] = "$431,065,444" ;
aTitle[4] = "Spider-Man" ; aDate[4] = "2002" ; aGross[4] = "$403,706,375" ;
aTitle[5] = "Jurassic Park" ; aDate[5] = "1993" ; aGross[5] = "$356,763,175" ;
aTitle[6] = "The Lord of the Rings: The Two Towers" ; aDate[6] = "2002" ; aGross[6] = "$333,623,857" ;
aTitle[7] = "Forrest Gump" ; aDate[7] = "1994" ; aGross[7] = "$329,452,287" ;
aTitle[8] = "The Lion King" ; aDate[8] = "1994" ; aGross[8] = "$327,450,682" ;
aTitle[9] = "Harry Potter and the Sorcerer's Stone" ; aDate[9] = "2001" ; aGross[9] = "$317,557,981" ;
aTitle[10] = "The Lord of the Rings: The Fellowship of the Ring" ; aDate[10] = "2001" ; aGross[10] = "$313,364,114" ;
aTitle[11] = "Star Wars: Episode II - Attack of the Clones" ; aDate[11] = "2002" ; aGross[11] = "$310,619,851" ;
aTitle[12] = "Star Wars: Episode VI - Return of the Jedi" ; aDate[12] = "1983" ; aGross[12] = "$309,064,373" ;
aTitle[13] = "Independence Day" ; aDate[13] = "1996" ; aGross[13] = "$306,200,000" ;
aTitle[14] = "The Sixth Sense" ; aDate[14] = "1999" ; aGross[14] = "$293,501,675" ;
aTitle[15] = "Star Wars: Episode V - The Empire Strikes Back" ; aDate[15] = "1980" ; aGross[15] = "$290,158,751" ;
aTitle[16] = "Home Alone" ; aDate[16] = "1990" ; aGross[16] = "$285,761,243" ;
aTitle[17] = "Shrek" ; aDate[17] = "2001" ; aGross[17] = "$267,652,016" ;
aTitle[18] = "Harry Potter and the Chamber of Secrets" ; aDate[18] = "2002" ; aGross[18] = "$261,724,299" ;
aTitle[19] = "How the Grinch Stole Christmas" ; aDate[19] = "2000" ; aGross[19] = "$260,031,035" ;
 
 
function ShowMovie(j) {
document.Movies.txtRank.value = j + 1 ;
document.Movies.txtTitle.value = aTitle[j] ;
document.Movies.txtYear.value = aDate[j] ;
document.Movies.txtGross.value = aGross[j] ;
} 
 
//-->
</script>

<table summary="" cellpadding=5 cellspacing=0 border=2>
<tr>

<td align=left colspan=2 bgcolor="#999999">


<FORM NAME="Movies">

<font color="#ffffff"><b>Point to the colored balls to see movie data</b></font>
</td>

</tr><tr>

<td align=right bgcolor="#cccccc"><b>Rank</b></td>
<td align=left><INPUT TYPE="text" NAME="txtRank" SIZE=50></td>

</tr><tr>

<td align=right bgcolor="#cccccc"><b>Title</b></td>
<td align=left><INPUT TYPE="text" NAME="txtTitle" SIZE=50></td>

</tr><tr>

<td align=right bgcolor="#cccccc"><b>Year</b></td>
<td align=left><INPUT TYPE="text" NAME="txtYear" SIZE=50></td>

</tr><tr>

<td align=right bgcolor="#cccccc"><b>Gross</b></td>
<td align=left><INPUT TYPE="text" NAME="txtGross" SIZE=50></td>

</tr><tr>

<td align=center colspan=2 bgcolor="#999999">

</FORM>


<script language="JavaScript" type="text/javascript">
<!--
var i ;
for (i = 0 ; i < aTitle.length ; i++ ) {
  document.write("<a href='javascript:' onMouseover='ShowMovie(" + i + ")'>") ;
	if ( (i+1) % 5 == 0 ) {
	  document.write("<img src='graphics/40-99-20.GIF' border=0>") 
	}
	else {
	  document.write("<img src='graphics/99-00-20.GIF' border=0>") 
	}
	document.write ("</a> ") ;
}

ShowMovie(0) ;

//-->
</script>


</td></tr></table>