Inserting an Image Button

This tutorial will show you how to insert an image button in a web page with Dreamweaver CS5.

Dreamweaver provides us with built-in buttons, but it's also possible to provide your own buttons and use those. You can draw them yourself or obtain them from various Internet sources.

I used a button earlier for some hyperlinks, and I'm going to use the same button again. Here I'm going to use it to offer customers a wider choice of flowers.

Here's the form so far.

I'm going to place the new button to the right of the list of flowers, the intention being that customers can access a longer list if they want more choice. (This button won't actually do anything yet, of course. I'd need to write some code!)

So, place the cursor to the right of the flower list.

This time we're going to use the Insert panel, so show it if it isn't already visible.

Select Forms from the dropdown. Now select Image Field. Note that this panel can be used in general for inserting objects into forms.

This invokes the Select Image Source dialog. Browse to the required button.

Click OK, and then complete the Input Tag Accessibility Attributes dialog.

Click OK, and the button image is inserted with its label.

With the image field selected we can update its properties in the Properties panel as required.

However, to make the button actually do something we would need to attach a behavior to it, which can be done using the Behaviors panel.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Inserting an Image Bar in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!