Arrays Two Dimensional

<script language="JavaScript">
<!--

2D array

playim = new Array(6)

playim[0] = new Image(65,90)
playim[0].src = "Payton.jpg"
playim[1] = new Image(65,90)
playim[1].src = "Hawkins.jpg"
playim[2] = new Image(65,90)
playim[2].src = "Baker.jpg"
playim[3] = new Image(65,90)
playim[3].src = "Schrempf.jpg"
playim[4] = new Image(65,90)
playim[4].src = "McIlvaine.jpg"
playim[5] = new Image(65,90)
playim[5].src = "SS.jpg"

This script uses two paired arrays. The first array playim is an array of the images. It serves to preload the images in the array.

Each element of the playim array is initiated as a new Image, with the dimensions (65,90). Additionally, the property src is described for each image.

A sixth image SS.jpg represents the Sonics logo.

function player(number,name,position,height,college){
this.number = number
this.name = name
this.position = position
this.height = height
this.college = college }

This function player will serve as the columnar index of the array roster. Each of the elements in the function, number,name,position,height,college, are defined as custom properties, using this.

var roster = new Array(5)

roster[0] = new player("20"," Gary Payton","Guard"," 6'4","Oregon State")

roster[1] = new player("33"," Hersey Hawkins","Guard"," 6'3","Bradley")

roster[2] = new player("42"," Vin Baker","Forward"," 6'11","Hartford")

roster[3] = new player("11"," Detlef Schrempf","Forward"," 6'10"," Washington")

roster[4] = new player("22"," Jim McIlvaine","Center"," 7'1"," Marquette")

The array roster holds the player data, indexed by numbered rows, and the function player properties number,name,position,height,college which act as columnar indices. This is how the two dimensional array is created.

heres an example of an equivalent 2D table

	number	name	position	height	college
0	20	Payton	Guard	6'4	Oregon
1	33	Hawkins	Guard	6'3	Bradley
2	42	Schrempf	Forward	6'11	Hartford
3	11	Baker	Forward	6'10	Wash.
4	22	McIlvaine	Center	7'1	Marq.

function selectim(i) {
var outall = "Seattle Sonics \n"

document.images.SS.src = playim[i].src;
outall += "#" + roster[i].number + roster[i].name+ roster[i].height
outall += "\n" + roster[i].position +roster[i].college
document.Sonic.bio.value = outall

window.status = "# " + roster[i].number + roster[i].name }

This function is the response calls from each players a href="JavaScript:selectim(i)" link object. It replaces the logo image SS with each of the players images, outputs the player properties stored in the playim array, and finally writes the players number & name to the window status bar.

function rost() {
var outall = "Seattle Sonics 1998 Starting Line-Up\n\n"

for ( j = 0 ; j < roster.length ; j++ ) {
outall += "#" + roster[j].number + roster[j].name +roster[j].height
outall += "\n" + roster[j].position + roster[j].college + "\n\n"

document.Sonic.bio.value = outall
window.status = "Seattle SuperSonics" }}

This function responds to calls from the link.
a href="JavaScript:rost()" which surrounds the image object SS. It outputs the roster to the textarea bio & writes to the window status bar.

function swapOff() {
document.images.SS.src = playim[5].src }
//-->
</script>
<head>
<body>

This function restores the image object SS to its original value. It is called by the onMouseOver event handler in the logo link object.

<form name="Sonic">

<a href="JavaScript:rost()"
onMouseOver="setTimeout('swapOff()',500)">
<img src="SS.jpg" name="SS" alt="Sonics Roster"border="0"
WIDTH="65" HEIGHT="90"></a>

<a href="JavaScript:selectim(0)">
<img src="Payton.jpg"alt="Gary Payton" border="0"
WIDTH="65" HEIGHT="90"></a>

<a href="JavaScript:selectim(1)">
<img src="Hawkins.jpg" alt="Hersey Hawkins" border="0"
WIDTH="65" HEIGHT="90"></a>
<a href="JavaScript:selectim(2)">
<img src="Baker.jpg" alt="Vin Baker" border="0"
WIDTH="65" HEIGHT="90"></a>

<a href="JavaScript:selectim(3)">
<img src="Schrempf.jpg"alt="Detlef Schrempf" border="0"
WIDTH="65" HEIGHT="90"></a>

<a href="JavaScript:selectim(4)">
<img src="McIlvaine.jpg" alt="Jim McIlvaine" border="0"
WIDTH="65" HEIGHT="90"></a>

<textarea name="bio" rows="6"
name="S1"cols="38"></textarea>
</form>

Each image is surrounded by a link object. This allows them to act as form buttons that call JavaScript functions.

Each of the player link objects a href="JavaScript: sends a value to selectim(i). These values correspond to the players row position in the paired arrays, roster & playim.