- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding Images and the Country Name
The country profile is basically functional, but it could use a little more information. In this task, we'll add an image and a description of the image, and we'll display the chosen country name more prominently.
Each tour and each country has an image, all of which are located in the images folder. An extra field in the database holds the image's name and URL. To display an image, all you need to do is load its URL dynamically into an otherwise static <img> element in HTML.
- Still in profiles.html, switch to design view and hover your mouse pointer over the right corner of the accordion bar Label 2. An eye icon will appear, as shown in Figure 32. Click the eye to open the second panel. Select and delete the text Content 2. (In a moment, you'll insert the image in this panel.)
- Place your cursor inside the content area of the lower accordion panel and then choose Insert > Image. In the Select Image Source dialog, select the Data Sources radio button at the top of the dialog (Windows) or the Data Sources button near the bottom of the dialog (Macintosh). Select imageURL for the field. In the URL field at the bottom of the dialog, place your cursor before the opening brace ({) and type images/ (see Figure 33).
- After you click OK in the Select Image Source dialog, Dreamweaver displays the Image Tag Accessibility Attributes dialog shown in Figure 34. Type {imageALT} for the alternate text, and then click OK.
- Position your cursor after the image icon in the lower accordion panel. In the Bindings panel, select the imageAlt field and click Insert. Figure 35 shows the result.
- Select the image icon and use the Properties pane to right-align the image (see Figure 36). When you're done with this step, the image icon appears on the right side.
- The name of the country the user selects doesn't currently display anywhere other than the table. You could add it to the other data in the accordion panel, but it merits a more prominent place on the page. In code view, place your cursor just inside the closing angle bracket of the <h1> tag containing the page banner Country Profiles. This is approximately line 34. Press the spacebar and type spry:detailregion="ds1" as shown in Figure 37.
- Now you can insert the country name. Return to code view and place your cursor after the word Profiles in the banner. Type a colon (:) and then a blank space. Next, select countryName from the Bindings panel and click Insert. Figure 38 shows the result.
- Save, upload, and test the file.
){kind=small}
)
When inserting images, normally you would browse to the image and let Dreamweaver insert the path. Because you're inserting a dynamic image in this case, you don't want to choose an individual image. By selecting the Data Sources button, you gain access to the recordset that contains the name of the dynamic image. You added the path to the images folder as part of the image URL, to indicate the location of the images.
){kind=small}
The imageAlt field carries a description of the image. In addition to adding it to the image's alt attribute, we'll display it on the page.
Notice that you now have a "broken image" placeholder graphic in the accordion panel. That happened because you modified the path to the image. The important part is the dynamic image name that Spry will use when it renders the page.
){kind=small}
){kind=small}
Before testing the changes, let's quickly take care of a few other data-display issues.
){kind=small}
A Spry detail region is necessary whenever you want to insert a Spry variable that should change based on the user selection from the Spry region.
)
Click through the various country choices in the table, observing how the country name changes at the top of the page (see Figure 39). Click the second accordion panel to display the picture for each country. Choose another country and watch the picture and image description change.
)
