Navigating the Bookmall

[ LiB ]

The actual bookmall opens when the visitor clicks on the Bookmall link at the bottom of the index page. The bookmall is actually a simple HTML page that defines two frames , as shown here. The left frame loads a navigation page from which the visitor selects an option; the right frame holds the contents of the page specified by the selected link.

 <HTML>    <HEAD>     <TITLE>Script 5.10 - Bookmall frame's page</TITLE>   </HEAD>   <FRAMESET COLS="175,*">     <FRAME SRC="Script 5.11.html" NAME="left" SCROLLING="no" FRAMEBORDER="1" NORESIZE>     <FRAME SRC="Script 5.12.html" NAME="right2" SCROLLING="auto" FRAMEBORDER="1" NORESIZE>     </FRAMESET>   </FRAMESET> </HTML>

The contents of the navigation page are listed next. JavaScript statements have been added to the head section to define and preload all the graphic images used to create the rollover effects for the page. The rest of the page is contained in the body section and is made up of five HTML links. The first link reloads a welcome page. The next three links load the URLs for various online bookstores. I also modified the tags to include the onMouseOver and onMouseOut events that drive the rollover effects.

NOTE

This is the point where you would cut and paste the special HTML links that each online bookstore provides you when you join its associates program. Of course, you would have to make a modification to each link to load it in the frame on the right (that is, you have to add the attribute TARGET="right2" ).

 <HTML>   <HEAD>     <TITLE>Script 5.11 - Navigation/Rollover page</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements         amazon1           =new Image;         amazon2           =new Image;         bn1               =new Image;         bn2               =new Image;         a1books1          =new Image;         a1books2          =new Image;         bookstore1        =new Image;         bookstore2        =new Image;         featured1         =new Image;         featured2         =new Image;         amazon1.src       ="amazon1.jpg";         amazon2.src       ="amazon2.jpg";         bn1.src           ="bn1.jpg";         bn2.src           ="bn2.jpg";         a1books1.src      ="a1books1.jpg";         a1books2.src      ="a1books2.jpg";         bookstore1.src    ="bookstore1.jpg";         bookstore2.src    ="bookstore2.jpg";          featured1.src     ="featured1.jpg";         featured2.src     ="featured2.jpg";     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY>     <P><IMG SRC="book.jpg" WIDTH="154" HEIGHT="74" BORDER="0"> </P>     <A HREF="Script 5.12.html" TARGET="right2"       onMouseover="document.mybutton1.src=bookstore2.src"       onMouseout="document.mybutton1.src=bookstore1.src"> <IMG       SRC="bookstore1.jpg" BORDER="0" NAME="mybutton1"></A><P>     <A HREF="http://www.amazon.com" TARGET="right2"       onMouseover="document.mybutton2.src=amazon2.src"       onMouseout="document.mybutton2.src=amazon1.src"> <IMG SRC="amazon1.jpg"       BORDER="0" NAME="mybutton2"></A><P>     <A HREF="http://www.bn.com" TARGET="right2"     onMouseover="document.mybutton3.src=bn2.src"     onMouseout="document.mybutton3.src=bn1.src"> <IMG SRC="bn1.jpg" BORDER="0"     NAME="mybutton3"></A><P>   <A HREF="http://www.a1books.com" TARGET="right2"     onMouseover="document.mybutton5.src=a1books2.src"     onMouseout="document.mybutton5.src=a1books1.src"> <IMG SRC="a1books1.jpg"     BORDER="0" NAME="mybutton5"></A><P>    <A HREF="Script 5.13.html" TARGET="right2"     onMouseover="document.mybutton6.src=featured2.src"      onMouseout="document.mybutton6.src=featured1.src"> <IMG SRC="featured1.jpg"     BORDER="0" NAME="mybutton6"></A>   </BODY> </HTML>

Figure 5.13 shows what the navigation page looks like when it is opened by the browser without the use of frames. The graphic image of the book is not a link; its only purpose is cosmetic. Each of the remaining links represents a different menu selection that will be loaded into the right frame (when the frames are enabled). Each button is green with gold lettering, but when the pointer passes over one of the buttons , it changes to a golden background with green lettering.

Figure 5.13. When this page is loaded into a frame as a navigation page, it is really just a regular Web page except that its links contain additional attributes that load URLs into a second frame.

graphic/05fig13.gif

The following shows the Web page that is initially loaded into the right frame when the bookmall is loaded. As you can see, it is a simple HTML page that displays basic welcome information. This page provides a lot of opportunities for JavaScript. For example, you could address the visitor by name again, post messages on the status bar, or add some animated effects such as a book that opens and closes .

 <HTML>   <HEAD>     <TITLE>Script 5.12 - Bookstore welcome page</TITLE>   </HEAD>   <BODY>     <TABLE BORDER="0" WIDTH="590">       <TR>         <TD>           <CENTER>             <IMG SRC="bstorelogo.jpg" BORDER="0" HEIGHT="78" WIDTH="636">             <P><H2>Hello and welcome to Jerry's On-line Bookmall!</H2></P>             <P>Feel free to shop some of the finest online bookstores on the Web.</P>             <P><FONT COLOR="red">Thanks for stopping by!</FONT></P>           </CENTER>         </TD>       </TR>     </TABLE>   </BODY> </HTML>

Figure 5.14 shows what the welcome page looks like when it is opened by the browser outside of any frames.

Figure 5.14. Not every page requires JavaScript.

graphic/05fig14.gif

Figure 5.15 shows what the bookmall looks like when visitors come to shop. As you can see, the combination of frames, rollover graphics, and simple HTML present an elegantly simple yet functional interface.

Figure 5.15. When combined, frames, HTML, and JavaScript create one of the most powerful organization and presentation tools available to any Web page designer.

graphic/05fig15.gif

When the visitor is ready to go shopping, he simply clicks on one of the buttons representing an online bookstore. Figure 5.16 shows what happens if the user clicks on the AMAZON.COM button. As you can see, the amazon.com Web site is loaded into the right frame, and the visitor can begin shopping. Because the visitor enters the amazon.com site using the special links on your navigation Web page, you are credited with a portion of every purchase this visitor makes. Best of all, the visitor never really leaves your Web site. This makes it easy for him to jump between other bookstores or to load other pages where you may have added valuable content. This technique makes small Web sites seem much bigger than they actually are. By adding rollover links to other online businesses, you can easily expand the Web site to take advantage of a diverse set of business opportunities.

Figure 5.16. Frame technology makes it possible to load URLs from other Web sites into one of your frames so that your visitors can continue to explore the Internet without ever leaving your Web site.

graphic/05fig16.gif

[ LiB ]