JAVASCRIPT - Visor de imágenes 5

Visor de imágenes 5

Compatibilidad: Ms Internet Explorer, Netscape
El último visor de imágenes, esta vez con un menú lateral.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE>

</HEAD>

<script language="javascript">
<!-- Image Selector
// Cameron Gregory - cameron@bloke.com
// 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];
}

// 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>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]