Skip Navigation | Groups

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

 

Alternative ways to use Interactive Buttons for links

Use Interactive Buttons as background images


Using Interactive Buttons in Shared Borders or Include Pages involves overcoming problems and restrictions in the Web construction. The pages linked to IB Home Page describe some of the problems encountered building these pages, and offer some workarounds and solutions.

These pages describe different ways to use the Interactive Buttons supplied with FrontPage and Expression Web, that will work in almost any page in any standards compliant browser. The buttons on the left uses the buttons as background images, and use CSS to provide the interactivity - described in  Swap Buttons below.

Swap Buttons

... uses existing Interactive Buttons, but uses CSS to swap these as required. The "pressed" button is used to indicate the current page. This method has problems with accessibility - the text in the buttons cannot be resized (they are images). And if CSS is not supported, the buttons totally disappear. For these reasons the method cannot be recommended.

The orange buttons, above-left, use this method.

Plain Background

... uses blank Interactive Button images as backgrounds. The backgrounds are swapped as required. With this method the links are plain text, and can be resized to suit the user - but the button backgrounds must be large enough to accommodate the resizing. The choices of button from the default selection of buttons is limited for this method.

The grey buttons (above-left) use this method.

"Normal" Interactive Buttons

... using behaviours (supplied by Expression web or FrontPage) also have accessibility problems, particularly resizing, and also may have problems in working - see IB Home Page for details. However, the behaviours (and the event calls in the links) can be replaced by hand crafted JavaScript which eliminates those problems, but the text resizing and no-image support accessibility problems remain.

Also, Note that these Behaviours were designed to work with older browsers - up to IE 6 but including Netscape 4 which uses the (now obsolete) <layer> tag. They may work with present day browsers, but some code used is bloated, some is deprecated in today's browsers, and may fail completely in tomorrow's.