• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 38. Graphics and Animation > Putting It All Together—The Art Display Ap...

Putting It All Together—The Art Display Applet

Now that you've seen how the various graphics primitives work, you can put them together to build a graphics-intensive applet. Suppose an art dealer has hired you to build a Web site that displays pieces of art online. In addition to showing the art, the dealer wants to allow customers to select a frame and matte. You might write the HTML shown in Listing 38.5.

Code Listing 38.5. Frames.html—The User Chooses a Frame, Matte, and Piece of Art to Display

<HTML>
<HEAD><TITLE>Demo of Frames</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
  // set the applet's frame property based on the value selected
  function setFrame(theObject)
  {
    //alert("got: " + theObject.options[theObject.selectedIndex].value);
    document.theImage.setFrame(theObject.
     options[theObject.selectedIndex].value);
  }

 // set the applet's matte property based on the value selected
  function setMatte(theObject)
  {
    //alert("got: " + theObject.options[theObject.selectedIndex].value);
    document.theImage.setMatte(theObject.
     options[theObject.selectedIndex].value);
  }

 // set the applet's image property based on the value selected
  function setImage(theObject)
  {
    //alert("got: " + theObject.options[theObject.selectedIndex].value);
    document.theImage.setImage(theObject.
     options[theObject.selectedIndex].value);
  }
//-->
</SCRIPT>
<BODY>
<FORM NAME="imageForm">
<TABLE>
<TR>
  <TD><BIG>Frame</BIG></TD>
  <TD><BIG>Matte</BIG></TD>
  <TD><BIG>Picture</BIG></TD>
</TR><TR>
  <TD>
  <SELECT onChange="setFrame(this);">
    <OPTION>--choose a frame material--
    <OPTION VALUE="#FFCC99">Light Wood
    <OPTION VALUE="#993300">Dark Wood
    <OPTION VALUE="#FFCC00">Gold Metal
    <OPTION VALUE="#C0C0C0">Silver Metal
  </SELECT>
  </TD><TD>
  <SELECT onChange="setMatte(this);">
    <OPTION>--choose a matte material--
    <OPTION VALUE="#FFFFFF">White
    <OPTION VALUE="#DDDDDD">Light Gray
    <OPTION VALUE="#999999">Dark Gray
    <OPTION VALUE="#000000">Black
  </SELECT>
  </TD><TD>
  <SELECT NAME="thePicture" onChange="setImage(this);">
    <OPTION VALUE="">--choose a picture--
    <OPTION VALUE="mike.jpg">Mike
  </SELECT>
  </TD></TR>
</TABLE>
</FORM>
<APPLET NAME="theImage" CODE="TImage.class" WIDTH="500" HEIGHT="300">
</APPLET>
</BODY>
</HTML>
					

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint