Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Using the Insert Interactive Button dialogue

How to build Interactive Buttons


For buttons used in a navigation bar, two images are required for each hyperlink - one for the link, and one for the hovered state. A third button may be used to show the current page, as in the example in the left border (the button labelled "Generate IB").

Insert Interactive Button - Button tabCreate the buttons using the Insert->Interactive Button dialogue.

Choose the type of button, and add the button text and the link URL. If blank buttons are required the button text should be left blank, or be a single space.

Then move to the Font tab.

Insert Interactive Button - Font tabChange the text colours (if desired) for the different states of the button, and also set the text font-face, size and style. This is not required for blank buttons.

Move on to the Image tab.

Interactive Button - image tabHere, set the image size and select the type of image. Do not select "Preload button images" since this adds extra code to the page with very little gain for the user (unless they are using a very slow dialup connection).

When satisfied, click OK.

The result will be an Interactive Button with all the overhead that goes with it.

At this point, save (do not close) the page.

Embedded Images save dialogueWhen saving the Save Embedded Images dialogue should appear. This will list the new buttons just created. Change the file names to something more appropriate - here the images are renamed to "test-buttonA.gif" etc, where "test-button" relates to the button text or link, and A, L and H correspond to Active, Hover, and Link - the Active button ("Pressed" in IB-speak) can be used to show the current page. Use the preview to determine which button is which, and be consistent with subsequent buttons - the buttons are not listed in "type" order.

Repeat for any other buttons required.