Creating Custom Interactive Buttons

• Introducing custom Interactive Buttons
• Examples
• How to create Interactive Buttons
• See it in action
• Additional resources
   

Introducing custom Interactive Buttons

Microsoft® Office FrontPage® 2003 makes creating buttons incredibly easy with new interactive buttons. Simply select which of the many ready-made buttons you want to use, then specify the text you want to appear on each, and then FrontPage 2003 does the rest for you. It creates buttons for normal, hovered, and pressed states in only a matter of minutes.

If your Web site design calls for custom buttons, you can create your own with a graphics program, then load them into FrontPage 2003, and then freely make custom interactive buttons when and where you need them.  Adding custom interactive buttons to FrontPage 2003 is not difficult, but you should only undertake this only if you are comfortable with FrontPage 2003, know how to save and move files on your hard drive, and are comfortable with downloading and then editing an XML file.

Examples

Here is an example of an interactive button created from one of the ready-made buttons in FrontPage 2003 (style Corporate 4). Notice that when you hover your mouse over the button, the button image changes slightly. Similarly, when you press the button, the button changes until you are taken to the next page. This button shows the 3 states you can have for each button — normal, hovered, and pressed. Interactive buttons are created by specifying what graphics you want to use for each of these states, as well as the fonts and formatting you would like applied to the corresponding graphics for each state.

How to create custom Interactive Buttons

We would like to create custom interactive buttons that look like this:

Here are the steps we took to add these custom buttons to the list of ready-made interactive buttons we can use in FrontPage 2003:

1. Create your buttons in a graphics program. You can create .jpg or .gif files. Because FrontPage 2003 allows you to size buttons to be larger or smaller, you will need to create the buttons to be much larger than needed. The graphics for the buttons we want to use are 139 pixels wide by 29 pixels high. To accommodate scaling to be larger, we have created them to be 2 times larger than needed, or 278 pixels wide by 62 pixels high:
    

   Normal

   Hovered

   Pressed

   Tip: If you will want the page's background to appear behind the button, you should create .gif files.

2. Create a folder on your hard drive called buttons that is located at c:\documents and settings\%userprofile%\application data\microsoft\frontpage if that folder doesn't already exist. 
   
    

   Tip: %userprofile% is the name of the profile you log in as when you log onto Windows.

   
    

3. Copy your custom buttons to the c:\documents and settings\%userprofile%\application data\microsoft\frontpage\buttons directory.
   
   
    
4. Click this link to the sample buttons XML file and then save the file to the c:\documents and settings\%userprofile%\application data\microsoft\frontpage\buttons directory on your computer.
    
5. Open Notepad or another text editor and then open c:\documents and settings\%userprofile%\application data\microsoft\frontpage\buttons\ibutton.xml. 
   
    

   Tip: A quick way to open Notepad is to type Start, then click Run, then type Notepad at the Run prompt, and then click OK.

   
    
6. Edit the XML for your buttons. For each set of buttons (normal, hovered, and pressed) you will need one XML node, as shown in the XML file as the code from the <ibutton> tag through the </ibutton> tag.
   
   <?xml version="1.0"?>
   <!--_lcid="1033" _version="5013"-->
   <!--_LocalBinding -->
   <!-- Interactive Button Configuration File -->
   <ibuttons>

   <ibutton>

   <fp-btn>My Custom Buttons</fp-btn> <name><!--_locID_text="name2" _locComment="{StringCat=TXT}"-->My Custom Buttons</name> <title><!--_locID_text="title2" _locComment="{StringCat=TXT}"-->Button Text</title> <fp-font><!--_locID_text="fp-font2" _locComment="{StringCat=TXT}"-->Verdana</fp-font> <fp-font-style><!--_locID_text="fp-font-style2" _locComment="{StringCat=TXT}{ValidStrings=Regular,Italic,Bold,Bold Italic}"-->Regular</fp-font-style> <fp-font-size><!--_locID_text="fp-font-size2" _locComment="{StringCat=TXT}"-->10</fp-font-size> <fp-font-color-normal>#FFFFFF</fp-font-color-normal> <fp-font-color-hover>#FFF6CC</fp-font-color-hover> <fp-font-color-press>#FFF6CC</fp-font-color-press> <fp-align-rect-normal>0,0,278,62</fp-align-rect-normal> <fp-align-rect-hover>0,0,278,62</fp-align-rect-hover> <fp-align-rect-press>0,0,278,62</fp-align-rect-press> <fp-justify-horiz><!--_locID_text="fp-justify-horiz2" _locComment="{StringCat=TXT}{ValidStrings=left,center,right}"-->center</fp-justify-horiz> <fp-justify-vert><!--_locID_text="fp-justify-vert2" _locComment="{StringCat=TXT}{ValidStrings=top,center,bottom}"-->center</fp-justify-vert> <fp-direction><!--_locID_text="fp-direction2" _locComment="{StringCat=TXT}{L=!1025,1037}{ValidStrings=none,rtl}"-->none</fp-direction> <width>139</width> <height>29</height> <fp-img-hover>1</fp-img-hover> <fp-img-press>1</fp-img-press> <fp-preload>1</fp-preload> <fp-transparent>0</fp-transparent> <fp-proportional>1</fp-proportional> <fp-bgcolor>#ffffff</fp-bgcolor> <fp-text-antialias>all</fp-text-antialias> <fp-rgba-img-normal>button_normal.gif</fp-rgba-img-normal> <fp-rgba-img-hover>button_hover.gif</fp-rgba-img-hover> <fp-rgba-img-press>button_pressed.gif</fp-rgba-img-press> <fp-rgb-img-normal>button_normal.gif</fp-rgb-img-normal> <fp-rgb-img-hover>button_hover.gif</fp-rgb-img-hover> <fp-rgb-img-press>button_pressed.gif</fp-rgb-img-press>

   	</ibutton>
   </ibuttons>

   You will only need to edit the highlighted portions of the XML file:

   Tag	Affects
   <fp-btn>	The name the button is listed as in the FrontPage 2003 Interactive Buttons dialog box.
   <name>	The name of the button.
   <fp-font-color-normal>	The default HEX font color for normal buttons.
   <fp-font-color-hover>	The default HEX font color for hovered buttons.
   <fp-font-color-press>	The default HEX font color for pressed buttons.
   <fp-align-rect-normal>	The coordinates where the text should be placed on the button. The first 2 numbers should be zero, the third should be the width of the buttons in pixels, and the fourth number should be the height of the buttons in pixels. Our example uses buttons that are 278 x 62, so we are using 0,0,278,62.
   <fp-align-rect-hover>	Same as <fp-align-rect-normal>.
   <fp-align-rect-press>	Same as <fp-align-rect-normal>.
   <fp-justify-horiz>	Centering of text on buttons. Choices are left, center, or right.
   <width>	The default width of the buttons.
   <height>	The default height of the buttons.
   <fp-rgba-img-normal>	The file name for normal transparent .gif images.
   <fp-rgba-img-hover>	The file name for hovered transparent .gif images.
   <fp-rgba-img-press>	The file name for pressed transparent .gif images.
   <fp-rgb-img-normal>	The file name for normal images (such as .gif, .jpg, .png).
   <fp-rgb-img-hover>	The file name for hovered images (such as .gif, .jpg, .png).
   <fp-rgb-img-press>	The file name for pressed images (such as .gif, .jpg, .png.

7. Save the ibuttons.xml file. It should be located in the c:\documents and settings\%userprofile%\application data\microsoft\frontpage\buttons\ directory along with the buttons.
8. Use your new buttons.  Open the page you want to insert your new button into in FrontPage 2003 and then select Interactive Button on the Insert menu. You will see your new buttons listed with the other buttons. Click OK to insert your button into the page.
   
   
    
9. Save your page.
10. Try out your completed button. The button below was created using the process outlined above.
    
    

See it in action

The finance, human resources, and sales & marketing sample sites have custom Interactive Buttons on their home pages:

Additional resources