Datasheet

5. Next is the CSS, which controls the switching on and off of the dynamic submenu and the pre-

sentation of the menu blocks, such as the colors and font size. Save this as

SuiteListStyles

.css

in the Chapter1 folder.

td.menublock

{

background-color:#eeeeff; width:120px;height:25px;border-style:ridge; border-

width:thin; border-color:gray; font-weight: bold; text-align:center; font-family:

Arial; color:gray;

}

div.submenublock

{

visibility:hidden; background-color:lightsteelblue; position:absolute; top:

70px; left: 133px; width:180px;border-style:ridge; border-width:thin; color:gray;

font-weight: bold; text-align:center; font-family: Arial;

}

{

color: White; text-decoration: none;

}

a:hover

{background-color: #28618E;

font-weight: bold;

}

6. Last is the HTML page that contains very little detail. It simply has links to the script and the

CSS and a single placeholder

<span> tag into which you write the menu information. Save this

default.htm in the Chapter1 folder.

<html>

<head>

<title>Ajax First Example</title>

</head>

</body>

</html>

7. Open your browser and view the default.htm page. Ensure that you do this via your web

server. For example, the following typed into the browser Address bar would be correct:

http://localhost/BegAjax/Chapter1/default.htm

If you were to browse via Windows Explorer directly to the file and click on it, then you would

see the following and this would not work:

C:\Inetpub\wwwroot\BegAjax\Chapter1\default.htm

Note that in the code download for Chapter 1, there are some extra pages for each of

the suites. These are for presentation only and are not needed for the example.

Chapter 1: Introducing Ajax

04_106754 ch01.qxp 2/9/07 6:15 PM Page 25