Selector de imagenes javascript

Esta sencilla rutina presenta dos listas, una en donde muestra una vista previa y otra en donde hay una pequeña descripción. Cuando seleccionamos un item automáticamente, visualiza la imagen asociada a dicho item.

Código Javascript


<HTML>
<HEAD>
<TITLE>Selector</TITLE>
<SCRIPT language="javascript">
<!-- Image Selector
// Cameron Gregory - http://www.bloke.com
// http://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[i]);
    else
      document.write("<OPTION value="+i+">"+imageSet[i]);
  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>

</HEAD>
<body>

<SCRIPT>
<!--
SelectorLongNames(85,75,5,"ejemplos/Acuario.gif,ejemplos/Aries.gif,ejemplos/Leo.gif,ejemplos/Piscis.gif,ejemplos/sagitario.gif,",
"Acuario,Aries,Leo,Piscis,Sagitario,");
// -->
</SCRIPT>
</body>
</html>
Ver ejemplo Javascript en funcionamiento