|1.||Start InfoPath. Create a blank form.|
|2.||In the Design Tasks task pane, click the Controls link. Click the Button control.
A Button control appears on the blank form.
|3.||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.
|4.||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.
Note The file that is used in this example is PoweredByCS_commercial.gif.
|5.||On the File menu, click Save.|
|6.||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.
|7.||In InfoPath 2007, click Save As Source Files on the File menu.|
|8.||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.|
|9.||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:
|10.||Open the View1.xsl file in Notepad. To do this, follow these steps:
|11.||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″/>
|12.||Replace the co de to below code and change the name of the image
The code that appears will look similar to the following code:
<input class=”langFont” title=”” style=”BORDER: none; BACKGROUND-IMAGE: url(PoweredByCS_commercial.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″/>
|13.||Save the modified View1.xsl file. Close Notepad.|
|14.||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.
|15.||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.
|17.||In Notepad, reopen the View1.xsl file. To modify the “<input . . ./>” section, follow these steps:
|18.||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:
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.
Communities Tagged : Technology
2 Responses to “Insert Image in InfoPath Form – Browser Compatibility Form”
Published by NS, Jenkins on 11 Mar 2009 at 06:11 pm