Using HTML Attributes

You can use a database to provide a dynamic value for an HTML attribute by binding the attribute to a recordset field. For example, you can customize a page by dynamically adding a table background color to your page from a recordset field value for user color preferences.

To add a dynamic attribute:

1.	Open the newArt.cfm page you saved in the previous task and resave it as newArt2.cfm. If you don't want to create the page yourself, you can download the newArt2.cfm file from this book's Web site at www.peachpit.com/dw.vqp. In this task, we'll bind the ARTNAME field from the ART table to the title attribute in the img tag. This makes dynamic data from the ARTNAME field available for display as a tool tip when a viewer moves his or her pointer over the image on the page in a browser window.
2.	In the Application panel group, click the Bindings tab to access the Bindings panel. From the recordset list, click the plus button to expand the newart recordset.
3.	Using Design view, select the dynamic image icon in the Document window (Figure 7.23). Figure 7.23. A page with a dynamic image and dynamic text displays in Design view with a dynamic image icon and text placeholders.
4.	On the Bindings panel, select the LARGEIMAGE field. Note that img.src appears in the Binding column, indicating that the src attribute of the HTML img tag is bound to the LARGEIMAGE field (Figure 7.24). Figure 7.24. Because the image source attribute is bound to the LARGEIMAGE field, img.src displays in the Binding column next to the LARGEIMAGE field.
5.	With the image icon still selected in the Document window, select the ARTNAME field on the Bindings panel.
6.	From the Bind To drop-down list at the bottom of the dialog, select img.title, and then click the Bind button (Figure 7.25). Figure 7.25. Click the Bind button to bind a recordset field to an attribute value. This binds the data in the description field to the title attribute of the img tag. The new binding (img.title) appears in the Binding column for the ARTNAME field (Figure 7.26). Figure 7.26. After you bind a field to an HTML attribute, the HTML tag and attribute name display in the Binding column next to the field name.
7.	Save the page. To preview the page in a browser, from the main menu bar choose File > Preview in Browser. When you move your pointer over the image, the description Charles appears as a tool tip (Figure 7.27). Figure 7.27. The content of the image title attribute displays as a tool tip when you mouse over the image in a browser.