Thumbnail Sample Description

What we have done is set up two tables one to layout and display each of the individual clips. The other to contain an individual cell to display the larger preview or thumbnail. Below we have shown you one cell layout where we have set the alignment, width, height and title and display the smaller clips; these of course will vary for your page. You can also see the other table containing the individual cell for displaying the preview clip, we have assigned a filler clip and have given the IMG tag a NAME, previmg, to be used later in our script.

The key to the individual clip cells is the HREF tag where we have assigned the tag to the JavaScript command, fprev(). fprev() does all the work of changing the value of the IMG tag. Depending on the value passed in we assign the SRC attribute to a larger clip in our SWITCH statement.

It is as easy as that. Good luck and happy viewing.

  <SCRIPT LANGUAGE=JAVASCRIPT>
  function fprev(p)
  {
    switch (p)
    {
      case "0":
      {
        previmg.src = "webmeno128.jpg"
        break;
      }
      case "1":
      {
        previmg.src = "webmenh128.jpg"
        break;
      }
      case "2":
      {
        previmg.src = "webmenp128.jpg"
        break;
      }
    }
  }
  </SCRIPT>

  ...

  <table align="center" border="0" width="75%" height="64">
  <tr>


    <td align="center" width="25%" height="64">
    <a href=javascript:fprev('0') title="The Beginning">
    <img border="0" src="webmeno64.jpg"></a></td>

  ...

  </table>

  <table align="center" border="1" width="50%">
  <tr>
    <td align="center" width="25%" height="128">
   <img name="previmg" border="0" src="space-white.gif"></td>
  </tr>
  </table>