Dreamweaver - Forms - Adding an image field
Go to the forms tab on the Insert menu:
Click on the  icon to create a new form. In Design view, the form is outlined by a dashed red line.
Once you've created a form, move your cursor inside the form area. Then click on the  icon to create a new image field. This will pop up a new window that will let you select what image to use:
- To make things simple, just move whatever image you want to use into the same folder as all of your other files, or put it in a separate "Images" folder (still under your main site folder). Then just browse to the image you want to use and click "OK".
Image fields are used just like submit buttons. The only difference is that instead of having a dull grey box to click on you have whatever image you feel like using. Here's an example:
Here's the code for that example:
If you want to change the properties of the image field, right click on it and select what you want to edit.
Selecting "Name..." pops up a window that lets you change the name of the image field.
Selecting "Source File..." pops up the same window from earlier that lets you choose what image to use.
Selecting "Value..." pops up a window that lets you change the value of the image field. The Value of a image field is used like the Value of a hidden element.
Selecting "Alt Text..." pops up a window that lets you change what text will come up when the user hovers their mouse over the image.
Selecting "Edit Tag <input>..." lets you change all of the attributes at once:
- The "Type" dropdown menu lets you change it from a image field to a radio button or any other kind of form element.
- The "Name" field lets you change the name of the image field.
- The "Value" field lets you change the value of the image field.
- The "Source" field lets you specify the image to use.
- The "Alternate Test" field lets you specify what text will come up when the user hovers their mouse over the image.
- The "Alignment" menu gives you a number of options for aligning the text:
- [Blank] - This is the default. This aligns the image exactly where you put it and the bottom edge of the image lines up with the bottom edge of the text.
- Baseline - Same as the default. This may work differently on different browsers.
- Top - The top of the image lines up with the top of the text.
- Middle - The middle of the image lines up with the bottom of the text.
- Bottom - Same as the default.
- Textop - Same as the default. This may work differently on different browsers.
- Absolute Middle - The middle of the image lines up with the middle of the text.
- Absolute Bottom - Same as the default.
- Left - This will align the image on the left side of the screen.
- Right - This will align the image on the right side of the screen.
- The "Usemap" is beyond the scope of this tutorial.
- The "Disabled" checkbox makes it so that the user cannot click on the image.
- The "Width" and "Height" fields let you specify how wide and how tall the imag will appear (in pixels).
- The "Horizontal Space" field lets you specify how much room will be between the image and the rest of the text on both sides of the image.
- The "Vertical Space" field lets you specify how much room will be between the image and the rest of the text on the top and bottom.
- The "Border" field lets you specify how large of a border (seen as a black line) should be around the image.
Select "Edit Tag Code <input>..." if you want to edit the tag properties by hand.
Alternatively, you can change the properties of the image field through the properties menu:
- The box under the word "Image Field" on the left is the name of the image field.
- The "W" field is the width of the image.
- The "H" field is the height of the image.
- The "Src" field is the location of the image file. The little folder icon on the right lets you browse for a file.
- The "Alt" field lets you specify what text will come up when the user hovers their mouse over the image.
- The "Align" menu lets you set the alignment (explained above).
- The "Edit Image" button opens the image in Microsoft Photo Editor.
|
|
