Add AJAX links and tooltips

Before adding the AJAX links and tooltips, copy the images folder provided in the .zip package (\tutorials\Company Presentation) in the content folder of your site structure (notice it in the Files tab of the Files panel). Then switch back to the AJAX Panels tab of the Files panel. There, click the Content/News item in order to make it editable in the index master page and follow the steps below:

1. Select the "See details" text section corresponding to the MX Spring Pack 2006 news. In order to transform this text into an AJAX link and make it display, on mouse-over, a tooltip with the content of the page it points to, apply the AJAX Link server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. The dialog box has three tabs.
   
   Note: You can also apply the AJAX Link command from the MX AJAX Toolbox tab of the Insert bar.
                                          

2. Configure the first tab (Basic) of the AJAX Link server behavior as shown below:
   
   
                            

3. • In the Target panel drop-down menu select the Content panel.

   • In the Target state drop-down menu select the SpringPack state.

   • The Link Text text box displays the selected text.

   • Check the Enable tooltip option.

   • Click the next tab to continue configuring the server behavior.

3. This AJAX link will not pass any parameters, so leave the second tab (Parameters) of the AJAX Link server behavior as it is by default:
   
   
                           

4. Configure the third tab (Tooltip) of the AJAX Link server behavior as shown below:
   
   
                       

5. • Check the Enable tooltip option.

   • In the Panel drop-down menu select the Content panel since the tooltip is stored in one of its states.

   • In the State drop-down menu select the SpringPack state.

   • In the Width text box enter 300.

   • In the Height text box enter 400.

   • Click OK when you are done configuring the server behavior.

5. Select the "See details" text section corresponding to the JSEclipse 1.5.0 news, and just like above, transform it into an AJAX link that points to the JSEclipse state of the Content panel, and that retrieves its tooltip (300x400) from that state as well.

6. Save the changes in the News state of the Content panel.

Continue with the SpringPack state. To make it editable, select the Content/SpringPack item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the SpringPack panel state, and then follow the steps below:

1. Create a new paragraph under the MX Spring Pack 2006 title (press Enter). Click the Images : Image icon in the Common tab of the Insert bar:
   
   
            

2. In the window that opens browse to the logo_MXSpringPack.jpg image located in the \content\images\ site folder, and select it to be inserted in page:
   
   
            

3. Another dialog box will pop-up after you press OK in the Select Image Source one, namely the Image Tag Accessibility Attributes dialog box.  Just click Cancel to skip setting values for the alternate text and long description image attributes (they are not important in this tutorial context), and to insert the image in page:
   
   
            

4. Once the image is inserted, select the "Back" text section on the bottom of the state page, and just like above, transform it into an AJAX link that points to the News state of the Content panel, but do not enable the tooltip.

5. Save the changes in the SpringPack state of the Content panel.

Continue with the JSEclipse state. To make it editable, select the Content/JSEclipse item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the JSEclipse panel state, and then follow the steps below:

1. Create a new paragraph under the JSEclipse 1.5.0 title (press Enter) and insert in it the logo_JSEclipse.jpg image located in the \content\images\ site folder, just like you did for the SpringPack state.

2. Select the "Back" text section on the bottom of the state page, and transform it into an AJAX link that points to the News state of the Content panel and that does not display a tooltip, just like you did for the SpringPack state.

Save the changes, upload the site to the server, and preview the index page in browser (press F12). If you click the News item in the menu on the left, the Content panel will display the News state:

In the next topic you will customize the master page header: you will remove the default link added to it (notice it in the image above), you will add the company logo, and you will change the gradient effect so to match the footer one.