1.插入“图像域”

“图像域”可以替代“提交”按钮执行将表单数据提交给服务器端程序的功能。使用图像按钮，可以使文档更为美观。下面通过一个简单示例介绍在文档中插入图像域的具体操作，以及利用图标代替提交按钮的技术。最终的创建效果如图9-15所示。

执行“插入”|“表单”|“表单”命令，或者单击“表单”面板中的“表单”按钮，添加表单。

执行“插入”|“表格”命令插入一个三行两列的表，如图9-16所示。

图9-15 实例效果

图9-16 插入表

在表格相应位置输入文本和文本域。

选中表格第三行的两个单元格，执行“修改”|“表格”|“合并单元格”命令。

光标定位于表格第三行的单元格内，执行“插入”|“表单”|“图像域”命令，或单击“表单”插入面板上的“图像域”图标，弹出“选择图像”对话框。

选择一个需要的图像文件，单击“确定”按钮。

此时若按F12键预览页面，将发现单击图像后页面没有变化，没有实现提交表格。要实现提交表格功能还得继续下面的步骤。

单击文档窗口顶部的按钮，切换到代码和设计视图。在“设计”视图单击图像域，这时在代码视图中相关的代码背景色将显示为灰色。(www.daowen.com)

在图像域代码末尾加上“value=Submit”，这时图像域代码成为：<input name="imageField"type="image"src="mail.gif"width="23"height="16"border="0"value="Submit">。

保存文档。至此，文档创建完毕。可以按下快捷键F12在浏览器中预览整个页面。当单击图像时就会跳转到表单处理页面。

2.图像域属性

选中图像域的属性设置面板如图9-17所示，它包含了下面几项属性值：

图9-17 图像域的属性设置面板

➢“图像区域”：用于设置图像域的名称，该名称可以被脚本或程序所引用。

➢“源文件”：用于设置图像的URL地址，用户可以单击右方文件夹图标，选择所需图像，也可在文本框中直接输入图像地址。

➢“对齐”：用于选择图像在文档中的对齐方式。

➢“替换”：用于设置图像的替换文字，当浏览器不显示图像时，会以这里的文字替换图像。

➢“类”：用于设置应用于图像域的CSS样式。

➢“编辑图像”：启动默认的图像编辑器，并打开该图像文件进行编辑。