How to put an image on a button in InfoPath 2003 or in InfoPath 2007

View products that this article applies to.

SUMMARY

You can put an image from a .gif file on the face of a Button control in Microsoft Office InfoPath 2007 or in Microsoft Office InfoPath 2003. You can do this by specifying the attributes of the Button in the View.xsl file of the form. You must modify the style of the INPUT element of the View.xsl file for the form.

MORE INFORMATION

The following steps describe how to build a sample that puts a .gif file on a Button. The following steps require that you use a .gif file. A typical installation of Microsoft Office has a folder of .gif files that you can select from to help you to develop your example. By default, the folder of .gif files is located at C:\Program Files\Microsoft Office\ClipArt\PUB60Cor.

Start InfoPath. Create a blank form.
In the Design Tasks task pane, click the Controls link. Click the Button control.

A Button control appears on the blank form.
Right-click the Button on the form, and then click Button Properties. In the Button Properties dialog box, click the Size tab. Change the height to 100 pixels. Change the width to 100 pixels. Click OK.
In InfoPath 2007, click Resource Files on the Tools menu. In the Resource Files dialog box, click Add. Move to the folder that contains the .gif files, and then double-click the .gif file that you want. Click OK to close the Resource Files dialog box.

In InfoPath 2003, click Resource Manager on the Tools menu. In the Resource Manager dialog box, click Add. Move to the folder that contains the .gif files, and then double-click the .gif file that you want. Click OK to close the Resource Manager dialog box.

Note The file that is used in this example is AG00174_.gif.
On the File menu, click Save.
In the File Name box, type Button1 to change the name of the form. Save the form to a folder of your choice. Click Save to close the Save As dialog box.

Note Do not close the form that you are designing.
In InfoPath 2007, click Save As Source Files on the File menu.

In InfoPath 2003, click Extract Form Files on the File menu.
In the Browse for Folder dialog box, move to the folder in which you saved the Button1 form. Click the folder, and then click OK to close the Browse for Folder dialog box. On the File menu, click Close to close the form.
In Microsoft Windows Explorer, move to the folder that contains the form and the files that were extracted from the Button1.xsn file.

Note The folder contains the original Button1.xsn file and the following extracted files:
- Manifest.xsf
- Sampledata.xml
- Template.xml
- Myschema.xsd
- View1.xsl
Open the View1.xsl file in Notepad. To do this, follow these steps:
1. Right-click the View1.xsl file.
2. Click Open With.
3. Click Notepad from the available options.

In the View1.xsl file that is now open in Notepad, locate the following line of code:

<input class="langFont" title="" style="WIDTH: 86px; HEIGHT: 85px" type="button" value="Button" xd:xctname="Button" 
     xd:CtrlId="CTRL1_5" tabIndex="0"/>

From the following style attribute, copy the part that is in quotation marks:

style="BORDER: none; BACKGROUND-IMAGE: url(yourImageHere.gif); BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat;"

Note What you copy will look similar to the following code:

BORDER: none; BACKGROUND-IMAGE: urlYourImageHere.gif; BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat;

Insert what you just copied into the existing style attribute so that the completed line will now look similar to the following code:

<input class="langFont" title="" style="BORDER: none; BACKGROUND-IMAGE: url(yourImageHere.gif); 
     BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat; WIDTH: 86px; HEIGHT: 85px" type="button" 
     value="Button" xd:xctname="Button" xd:CtrlId="CTRL1_5" tabIndex="0"/>

Change the style URL value from url(yourimageHere.gif) to url(AG00174_.gif).

Note You can also use the file name for the .gif file you previously chose.

The code that appears will look similar to the following code:

<input class="langFont" title="" style="BORDER: none; BACKGROUND-IMAGE: url(AG00174_.gif); 
     BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat; WIDTH: 86px; HEIGHT: 85px" type="button" 
     value="Button" xd:xctname="Button" xd:CtrlId="CTRL1_5" tabIndex="0"/>

Save the modified View1.xsl file. Close Notepad.
Move to the folder that has the files that you extracted from Button1.xsn.

Note This is the folder with the modified View1.xsl file.
Double-click Manifest.xsf to open the form in InfoPath.

Note The original Button shows the .gif image at the upper left with the word Button in the center of the Button.
Close InfoPath.
In Notepad, reopen the View1.xsl file. To modify the "<input . . ./>" section, follow these steps:
1. Change the Button size to 100 pixels by 100 pixels.
  
  You can do this by changing the WIDTH attribute of the Button and by changing the HEIGHT attribute of the Button.
2. Delete the word Button to remove the word Button from the face of the Button.
  
  You can do this by changing the VALUE attribute of the Button.
3. Center the .gif image on the Button.
  
  You can do this by changing the BACKGROUND-POSITION attribute of the Button.
  
  The changed <input.../> element will look similar to the following code:
  <input class="langFont" title="" style="BORDER: none; BACKGROUND-IMAGE: url(AG00174_.gif); BACKGROUND-POSITION: center; BACKGROUND-REPEAT: no-repeat; WIDTH: 100px; HEIGHT: 100px" type="button" value="" xd:xctname="Button" xd:CtrlId="CTRL1_5" tabIndex="0"/>
4. Save the modified View1.xsl file. Close Notepad.
Replace the earlier version of the Manifest.xsf file with the newer version of the Manifest.xsf file.

Note If you double-click the Manifest.xsf file, you open the form in InfoPath. The changes are not in the form. This behavior occurs because the earlier version of the Manifest.xsf file is in the cache. You must replace the earlier version of the Manifest.xsf file with the current version of the Manifest.xsf file. To do this, use either of the following methods:
- Method 1: On the Windows command line, type the following command, and then press ENTER:
  InfoPath.exe /cache clearall
- Method 2:
  1. Open the Manifest.xsf file in Notepad.
  2. On the File menu, click Save As.
    
    The Save As dialog box prompts whether you want to replace the existing file with the same file name.
  3. Click Yes
The newer version of the Manifest.xsf file has a newer time stamp. Therefore, when you double-click the newer version of the Manifest.xsf file, the cached file is discarded. The cached file is replaced with the newer version of the Manifest.xsf file. After you complete either Method 1 or Method 2, double-click the newer version of the Manifest.xsf file. You can see your new Button.