Adding Dynamic Images and Formatting the Population Number

The country profile is basically functional, so at this point, you'll add a couple enhancements to make it look better. In this task, you'll add an image dynamically, and you'll also format the population number to make it more readable. Formatting the population number is akin to formatting a number as currency, which you did in an earlier lesson. (You'll fix the region name problem later in the lesson.)

You might wonder how it is even possible to insert an image dynamically, since you can't put a whole image inside an Access database. You can, however, put an image's URL in a database, which is exactly what I did. 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 URLs, and I entered the URLs when adding new records. To display an image, all you need to do is dynamically load its URL into an otherwise static <img> element in HTML.

Still in profiles_detail.asp, switch to design view, and insert the cursor just before the <h2> element {rs_countries.countryName}.

In a moment, you'll insert the image here.
From the main menu, choose Insert > Image. In the Select Image Source dialog, select the Data Sources radio button at the top.

Normally, when you insert images, you browse to the image and Dreamweaver inserts the path. Because this is a dynamic image you are inserting, you can't specify the path. By choosing Data Sources, you gain access to the recordset that contains the path to the dynamic image.
Select imageURL from the list, and click OK.

The dynamic image is inserted, represented by a placeholder graphic. Before moving on, though, let's take a quick look at the code.

In ASP, the following code is added:
```
<img src="<%=(rs_countries.Fields.Item("imageURL").Value)%>" />
```
In ColdFusion, the following code is added:
```
<img src="<cfoutput>#rs_countries.imageURL#</cfoutput>" />
```
Though the technique used to insert this code is different than what you have done with the Bindings panel, the resulting code is the same. Dreamweaver creates an <img> tag with the src attribute. Rather than hard-coding a path in the src attribute, ASP or ColdFusion retrieves that pathwhich is none other than a string of text in the database, as shown in the accompanying figure.
Click the dynamic image icon where you inserted the image, and use the Property inspector to change its alignment to Right.

When you are done with this step, the dynamic image icon appears on the right side, and a yellow image icon appears in its original location to indicate where the image was inserted.

Before testing this functionality, let's quickly take care of the number formatting.
Select and delete the dynamic text underneath the Population heading. Position the cursor in the now-empty line. From the Application tab of the Insert panel, choose Dynamic Text.

The Dynamic Text feature offers the same functionality as the Bindings panel, except that it enables you to specify how to format the data.
In the Dynamic Text dialog, select population from the list. In the Format drop-down, select Number Rounded to Integer. Click OK.

In Lesson 7, I had you type in the function (FormatCurrency() or DollarFormat()) directly, so you could work with the code. In this step, you are doing the same thing (using a different function to format numbers, rather than currency) using Dreamweaver's visual interface.

When you are done with this step, the page in Dreamweaver looks just like it did before you deleted the original population number.
Save, upload, and test the file.

Both the image and the formatted number now show onscreen.
Still in your browser, test the functionality of these two pages by clicking Country Profiles in the navigation bar, and then clicking any country from the list.

Now at least you know Canada isn't the only country in the database!