Form Tutor - form/javascript example

    <HTML>
    <HEAD>
    <TITLE></TITLE>

    <SCRIPT language="JavaScript"><!--

    var flashindex = 0;
    var flashdir = "down";

    if (document.images)
    {
       smiley_ed =    new Image(64,64); smiley_ed.src =    "images/smiley_ed.gif";
       smiley_rick =  new Image(64,64); smiley_rick.src =  "images/smiley_rick.gif";
       smiley_tom =   new Image(64,64); smiley_tom.src =   "images/smiley_tom.gif";
       smiley_guido = new Image(64,64); smiley_guido.src = "images/smiley_guido.gif";

       flashpics = new Array(4);
       flashpics[0] = "smiley_ed";
       flashpics[1] = "smiley_rick";
       flashpics[2] = "smiley_tom";
       flashpics[3] = "smiley_guido";
    }

    function hiLite(imgObjName)
    {
       if (document.images)
       {
          document.images['flashpic'].src = eval(flashpics[imgObjName] + ".src");
       }
    }

    function FlashSelect()
    {
       window.document.flashform.flashfriend[flashindex].selected = true;
       hiLite(flashindex);
       setTimeout('FlashSelect2()',500);
    }

    function FlashSelect2()
    {
       if (flashdir == "down")
       {
          flashindex++;
          if (flashindex == 4)
          {
             flashindex = 2;
             flashdir = "up";
          }
          FlashSelect();
       }
       else
       {
          flashindex--;
          if (flashindex == -1)
          {
             flashindex = 1;
             flashdir = "down";
          }
          FlashSelect();
       }
    }

    //--></SCRIPT>

    </HEAD>
    <BODY BGCOLOR="#FFFFFF" onLoad="FlashSelect()">

    <FORM NAME="flashform">
    <TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=150><TR><TD>
    <SELECT NAME="flashfriend" SIZE=4>
    <OPTION VALUE="ED">Ed
    <OPTION VALUE="RICK">Rick
    <OPTION VALUE="TOM">Tom
    <OPTION VALUE="GUIDO">Guido
    </SELECT>
    </TD><TD ALIGN="right">
    <IMG SRC="images/smiley_ed.gif" WIDTH="64" HEIGHT="64" BORDER="0" NAME="flashpic" ALT="">
    </TD></TR></TABLE>
    </FORM>

    </BODY>
    </HTML>

See it in action.

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 | Quick Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN