| home / experts / dhtml / column4 |  
|
|
arRecord = new Array()
arRecord[1] = new Array()
arRecord[1][1] = "CYNIC-001" // Fields, although in our
arRecord[1][2] = "F67-94-4/17" // example, are only strings,
arRecord[1][3] = "Filia" // can be numbers, URLS, filenames, etc.
arRecord[1][4] = "Neolithic II / 5000-3750" // In other words, they can contain
arRecord[1][5] = "Dark on Light" // the data to be displayed, or they
arRecord[1][6] = "open-shape" // can contain pointers
// to other sources for the data.
arRecord[2] = new Array()
arRecord[2][1] = "CYNIC-002"
arRecord[2][2] = "F68/78"
arRecord[2][3] = "Philia"
arRecord[2][4] = "Neolithic II / 5000-3750"
arRecord[2][5] = "Dark on Light"
arRecord[2][6] = "open-shape"
arRecord[3] = new Array()
arRecord[3][1] = "CYNIC-003"
arRecord[3][2] = "KM87/1495"
arRecord[3][3] = "Ambelikou-Aghios Georghios"
arRecord[3][4] = "Late Chalcolithic / 2800-2300"
arRecord[3][5] = "Red on White"
arRecord[3][6] = "stand"
arRecord[4] = new Array()
arRecord[4][1] = "CYNIC-004"
arRecord[4][2] = "C416"
arRecord[4][3] = "Unknown"
arRecord[4][4] = "Cypro-Classical II / 400-325"
arRecord[4][5] = "Bichrome VII"
arRecord[4][6] = "rhyton"
arRecord[5] = new Array()
arRecord[5][1] = "CYNIC-005"
arRecord[5][2] = "1935 C38/C65/B4"
arRecord[5][3] = "Unknown"
arRecord[5][4] = "Cypro-Archaic I / 700-600"
arRecord[5][5] = "Bichrome"
arRecord[5][6] = "figurine"
<HTML>
<HEAD>
.
.
.
<SCRIPT LANGUAGE="JavaScript" SRC="records.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
var curRecord = 1;
var maxRecords = arRecord.length-1;
var maxFields = arRecord[1].length-1;
function upDate() {
if (document.images) { document.images["imPic"].src="Cynic00" + curRecord + ".jpg" };
if (!ver4) { return };
for (i=1; i<=maxFields; i++) {
if (NS4) {
whichEl = eval("document.elField" + i + ".document");
with (whichEl) {
open();
write("<B>" + arRecord[curRecord][i] + "</B>");
close();
}
}
else {
whichEl = eval("document.all.elField" + i);
whichEl.innerHTML = "<B>" + arRecord[curRecord][i] + "</B>";
}
}
}
function showNext() {
curRecord = (curRecord < maxRecords) ? ++curRecord : 1;
upDate();
}
function showPrev() {
curRecord = (curRecord > 1) ? --curRecord : maxRecords;
upDate();
}
</SCRIPT>
.
.
.
</HEAD>
<BODY ...HTML attributes....ending with... onLoad="upDate()">
.
.
.
<IMG NAME="imPic" SRC="Cynic001.jpg" WIDTH=200 HEIGHT=150 HSPACE=10 ALIGN=LEFT>
Sampling Code Number: <SPAN ID="elField1" STYLE="position: absolute"></SPAN><BR>
Catalog Number: <SPAN ID="elField2" STYLE="position: absolute"></SPAN><BR>
Provenance: <SPAN ID="elField3" STYLE="position: absolute"></SPAN><BR>
Chronology: <SPAN ID="elField4" STYLE="position: absolute"></SPAN><BR>
Style-Typology: <SPAN ID="elField5" STYLE="position: absolute"></SPAN><BR>
Shape: <SPAN ID="elField6" STYLE="position: absolute"></SPAN><BR>
<A HREF="javascript:showPrev()">
<IMG SRC='Prev.gif' NAME='imPrevBut' ALT='Previous Sampling' WIDTH=58 HEIGHT=30 BORDER=0>
</A>
<A HREF="javascript:showNext()">
<IMG SRC='Next.gif' NAME='imNextBut' ALT='Next Sampling' WIDTH=58 HEIGHT=30 BORDER=0>
</A>
.
.
.
</BODY>
</HTML>
Using other strengths of Dynamic HTML, we can build on this simple routine. For instance, we could incorporate the Dynamic Images routines from column3 to allow the images to be zoomed. We could make the JavaScript more elegant by creating a function to create and populate the array.
Sometime in the not-too-distant future, we will come back to look at the data strengths of Navigator's Regular Expressions and Explorer's data binding. Just like lists, the features we could add are endless.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 09/09/97
Revised: 09/28/97
URL: http://www.webreference.com/dhtml/column4/allCode.html
