Finishing the Bookmall

[ LiB ]

The Jerry's Picks page is the last option on the navigation menu. It is loaded into the right frame of the bookmall and presents a selection of four books that Jerry has singled out as his personal recommended picks. A single HTML <TABLE> tag is used to organize the display of the book images. An onMouseOver and an onMouseOut event handler have been embedded into each book's link to display descriptive messages in the browser window status bar. These mouse events call two JavaScript functions located in the head section. The PostMsg() function writes the message passed to it from the onMouseOver event handler in each book's link as a message on the status bar; the ClearMsg() function clears the message from the status bar when the mouse pointer moves away from the link.

 <HTML>   <HEAD>     <TITLE>Script 5.13 - Jerry's picks page</TITLE>       <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">       <!-- Start hiding JavaScript statements         //Define a function that writes the message onto the browser's statusbar         function PostMsg(msg) {           window.status = msg;         }        //Define a function that clears the message off of the browser's status bar         function ClearMsg() {           window.status="";         }       // End hiding JavaScript statements -->      </SCRIPT>    </HEAD>   <BODY>     <TABLE BORDER="0" WIDTH="590">       <TR>         <TD>           <CENTER>             <H2 ALIGN="left"><IMG BORDER="0" HEIGHT="78" SRC="bstorelogo.jpg"                 WIDTH="636"></H2>             <BR>             <H1> Jerry's picks of the month!</H1>       <A HREF="Script 5.14.html" onMouseOver="PostMsg('Electrify Your Web Site In        a Weekend'); return true;" onMouseOut="ClearMsg();"><IMG        SRC="electrify.jpg" BORDER="0" ALT="Electrify Your Web Site In a        Weekend"></A>      <A HREF="Script 5.15.html" onMouseOver="PostMsg('Learn Microsoft Windows Me        Millenium Edition In a Weekend'); return true;"        onMouseOut="ClearMsg();"><IMG SRC="me.jpg" BORDER="0" ALT="Learn        Microsoft Windows Me Millenium Edition In a Weekend"></A>      <A HREF="Script 5.16.html" onMouseOver="PostMsg('Learn Windows 98 In a        Weekend'); return true;" onMouseOut="ClearMsg();"> <IMG SRC="w98.jpg"        BORDER="0" ALT="Learn Windows 98 In a Weekend"></A>      <A HREF="Script 5.17.html" onMouseOver="PostMsg('Learn HTML on the MAC In a         weekend'); return true;" onMouseOut="ClearMsg();"><IMG SRC="mac.jpg"        BORDER="0" ALT="Learn HTML on the MAC In a week end"></A>           </CENTER>         </TD>       </TR>     </TABLE>   </BODY> </HTML>

Figure 5.17 shows how the Jerry's Picks page appears in the bookmall. Notice that the status bar is displaying a message for the Electrify Your Web Site In a Weekend book because the mouse pointer is currently positioned over that book's graphic. Each book's image is actually a link that opens a new page in the right frame. Optionally, you might prefer to borrow some of the JavaScript logic in the index page to display each book's linked page in a new window outside the frame rather than inside it.

Figure 5.17. The Jerry's Picks page provides descriptive information about each book, using the browser's status bar.

graphic/05fig17.gif

The next four pages show the contents of the Web page associated with each of the four books. These pages contain only HTML and are organized using a single table. The code for the first of these pages is shown here. This page represents the Electrify Your Web Site In a Weekend book.

 <HTML>   <HEAD>     <TITLE>Script 5.14 - Book pick number 1</TITLE>   </HEAD>   <BODY>      <H2 ALIGN="left"><IMG BORDER="0" HEIGHT="78" SRC="bstorelogo.jpg"         WIDTH="636"></H2></CENTER>     <BR>     <TABLE BORDER="3" WIDTH="590" STYLE="HEIGHT: 254px; WIDTH: 633px">       <TR>         <TD>           <H2 ALIGN="left">             <FONT COLOR="red">Electrify Your Web Site In a Weekend</FONT>           </H2>           <P ALIGN="left">Learn everything that you need to know to start             building your own super-charged Web site!</P>         </TD>          <TD>           <H3 ALIGN="center">Featured Book!</H3>           <P ALIGN="center"><IMG ALT="" BORDER="0" HEIGHT="133"              SRC="electrify.jpg" WIDTH="108"></P>         </TD>       </TR>     </TABLE>   </BODY> </HTML>

Figure 5.18 show what the preceding example looks like when loaded directly into the bookstore site using frames .

Figure 5.18. The visitor can select individual books to view more detailed information.

graphic/05fig18.gif

This next page represents the Learn Microsoft Windows ME In a Weekend book. Its structure is the same as the previous example in that it relies only on the use of HTML. After all, just because JavaScript is powerful and can do many things doesn't means it has to be used on every page. Like any other tool, it is better used in some places and not in others.

 <HTML>   <HEAD>     <TITLE>Script 5.15 - Book pick number 2</TITLE>   </HEAD>   <BODY>     <H2 ALIGN="left">      <IMG BORDER="0" HEIGHT="78" SRC="bstorelogo.jpg" WIDTH="636">     </H2>     <BR>     <TABLE BORDER="3" WIDTH="590" STYLE="HEIGHT: 254px; WIDTH: 633px">       <TR>         <TD>           <H2 ALIGN="left"><FONT COLOR="red">Learn Microsoft Windows ME            Millenium Edition In a Weekend</FONT></H2>           <P ALIGN="left">Learn everything that you need to know about this            exciting Microsoft operating system.</P>         </TD>         <TD>           <H3 ALIGN="center">Featured Book!</H3>           <P ALIGN="center"><IMG ALT="" BORDER="0" HEIGHT="133" SRC="me.jpg"                WIDTH="108"></P>         </TD>       </TR>     </TABLE>   </BODY> </HTML>

Figure 5.19 shows how the preceding page looks when selected by visitors to Jerry's On-line Bookmall.

Figure 5.19. Looking at one of Jerry's picks as it is seen by visitors to the bookmall

graphic/05fig19.gif

The next two scripts show the HTML contents for the pages that represent the last two of Jerry's picks. These pages are structured similarly to the previous two examples and are provided here for consistency. The first script is for the Learn Windows 98 In a Weekend book:

 <HTML>    <HEAD>     <TITLE>Script 5.16 - Book pick number 3</TITLE>   </HEAD>   <BODY>     <H2 ALIGN="left"><IMG BORDER="0" HEIGHT="78" SRC="bstorelogo.jpg"         WIDTH="636"></H2>     <BR>     <TABLE BORDER="3" WIDTH="590" STYLE="HEIGHT: 254px; WIDTH: 633px">       <TR>         <TD>           <H2 ALIGN="left">             <FONT COLOR="red">Learn Windows 98 In a Weekend</FONT>           </H2>           <P ALIGN="left">Learn everything that you need to know about this            exciting Microsoft operating system.</P>         </TD>         <TD>           <H3 ALIGN="center">Featured Book!</H3>           <P ALIGN="center"><IMG ALT="" BORDER="0" HEIGHT="133" SRC="w98.jpg"            WIDTH="108"></P>         </TD>       </TR>     </TABLE>   </BODY> </HTML>

The next Web page shows the HTML statements that display the description for the Learn HTML on the Mac In a Weekend book:

 <HTML>   <HEAD>     <TITLE>Script 5.17 - Book pick number 4</TITLE>   </HEAD>   <BODY>     <H2 ALIGN="left"><IMG BORDER="0" HEIGHT="78" SRC="bstorelogo.jpg"         WIDTH="636"></H2></CENTER>     <BR>     <TABLE BORDER="3" WIDTH="590" STYLE="HEIGHT: 254px; WIDTH: 633px">       <TR>         <TD>           <H2 ALIGN="left">             <FONT COLOR="red">Learn HTML on the MAC In a Weekend</FONT>           </H2>           <P ALIGN="left">Learn everything that you need to know to begin            creating exciting Web sites using your Mac.</P>         </TD>         <TD>           <H3 ALIGN="center">Featured Book!</H3>           <P ALIGN="center"><IMG ALT="" BORDER="0" HEIGHT="133" SRC="mac.jpg"            WIDTH="108"></P>         </TD>       </TR>      </TABLE>   </BODY> </HTML>

[ LiB ]