Matt this script goes between your <head> tags
------------------------------------------------------------------------
<SCRIPT language="javascript">
<!-- Image Selector
// Cameron Gregory -
www.bloke.com//
www.bloke.com/javascript/Selector///
// ChangeLog
//
// Wed Jul 10 11:29:51 EDT 1996
// Added -1 check on array
// Wed Jul 10 06:25:30 EDT 1996
// merged pulldown and selector into one.
//
// Wed Jul 10 06:03:05 EDT 1996
// 3.0b5a hosed something! Stopped using Image objects
// and just stored in array.
//
// Usage:
// Selector(width,height,images)
// SelectorLong(width,height,boxHeight,images)
// SelectorLongNames(width,height,boxHeight,images,names)
// PullDownSelector(width,height,images)
// PullDownSelectorNames(width,height,images,names)
//
// width, height is image size (-1,-1) if you don't want to specify
// boxHeight is the height of the select box
// images is space or comma separated file list
// names is corresponding name array (comma separated)
function selectImage(f)
{
if (document.flipForm.which.selectedIndex >= 0)
document.flipForm.flip.src = imageSet[document.flipForm.which.selectedIndex];
}
function SelectorLongNames(width,height,listHeight,images,names)
{
/* si: start index
** i: current index
** ei: end index
** cc: current count
*/
si = 0;
ci=0;
cc=0;
imageSet = new Array();
ei = images.length;
for (i=1;i<ei;i++) {
if (images.charAt(i) == ' ' || images.charAt(i) == ',') {
imageSet[cc] = images.substring(si,i);
cc++;
si=i+1;
}
}
currentFlip = 0;
si = 0;
ci=0;
cc=0;
nameSet = new Array();
ei = names.length;
for (i=1;i<ei;i++) {
if (names.charAt(i) == ',') {
nameSet[cc] = names.substring(si,i);
cc++;
si=i+1;
}
}
currentFlip = 0;
// should check nameSet.length == imageSet.length
document.writeln("<FORM name=flipForm>");
document.writeln("<table border=0><tr><td>");
document.write("<img name='flip'");
if (width >0)
document.write("width="+width);
if (height >0)
document.write(" height=" +height);
document.writeln(" src=" +imageSet[0]+ ">");
document.writeln("</td><td>");
document.write("<Select");
if (listHeight > 0)
document.write(" size="+listHeight);
document.write(" name='which' onChange='selectImage(this.form)'>");
for (i=0;i<imageSet.length;i++)
if (i<nameSet.length)
document.write("<OPTION value="+i+">"+nameSet
);
else
document.write("<OPTION value="+i+">"+imageSet);
document.writeln("</SELECT>");
document.writeln("</FORM>");
document.writeln("</td></tr></table>");
}
function SelectorLong(width,height,listHeight,images)
{
SelectorLongNames(width,height,listHeight,images,",");
}
function PullDownSelector(width,height,images)
{
SelectorLongNames(width,height,-1,images,",")
}
function PullDownSelectorNames(width,height,images,names)
{
SelectorLongNames(width,height,-1,images,names)
}
// use -1 -1 if you don't know the width and height for the image
function Selector(width,height,images)
{
listHeight=5;
SelectorLong(width,height,listHeight,images);
}
// End Script -->
</SCRIPT>
----------------------------------------------------------------------
Matt then place the code down below in your html page and replace the numbers for the width and height you want and the pics with your pictures .... good luck !
--------------------------------------------------------------------------
<script language="javascript">
Selector(152,136,"dog2-small.gif condo-view-small.gif hiking1-small.gif hiking2-small.gif malanda-small.gif snowball-small.gif snowcamping-small.gif spider1-small.gif spider3-small.gif ");
</script>
<br>
-------------------------------------------------------------------------