Skip Navigation | Groups

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

 

Interactive Buttons restrictions: Workarounds

Working around the restrictions when using Interactive Buttons


Although only FrontPage is mentioned, all the tips and workarounds below apply equally to FrontPage (FP) and Expression Web (EW).

To overcome Restrictions on HTML element id values.

After inserting the first button, move to Code View and locate the HTML corresponding to the button.
The image will have been given an id in the form id="img1".  FP will assign the next button with id="img2", and so on.  If the img number is changed to a higher value, FP will count up from that value.  The id value is used in several places in the tag used for the Interactive Button.

  • In Top Border - Change id="img1" to id="img901"
  • In Left Border - Change id="img1" to id="img801"
  • In Right Border - Change id="img1" to id="img701"
  • In Bottom Border - Change id="img1" to id="img601"

As subsequent buttons are inserted in design view, the img# will increment from this starting point.  As long as there are less than 100 images in each border (quite likely), each border will have unique image ids.

If using Include Pages, use a similar technique to ensure they all start off at different levels in each Include Page.

Everywhere else in the main page content, leave the id values as they are: image ids will start from img1.

Example:
left_inc.htm (which is included on this page to provide the left border navigation) contains the line:

<p><a href="restrict.htm"><img border="0" id="img1"
src="images/button23.gif" height="20" width="100" alt="Restrictions"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/button24.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/button23.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/button25.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/button24.gif')"
fp-style="fp-btn: Soft Capsule 10; fp-font-style: Bold;
fp-transparent: 1" fp-title="Restrictions"></a></p>

There are 5 references to img1, which will all have to be changed to img801, thus:

<p><a href="restrict.htm"><img border="0" id="img801"
src="images/button23.gif" height="20" width="100" alt="Restrictions"
onmouseover="FP_swapImg(1,0,/*id*/'img801',/*url*/'images/button24.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img801',/*url*/'images/button23.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img801',/*url*/'images/button25.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img801',/*url*/'images/button24.gif')"
fp-style="fp-btn: Soft Capsule 10; fp-font-style: Bold;
fp-transparent: 1" fp-title="Restrictions"></a></p>

As new buttons are added the image id will be of the form id="img802" etc.


2- Overcome Restrictions on Folders

The Include Pages and the pages using them may be saved into the same folder (including the root folder) - the buttons, in this case, can be saved anywhere, with no restrictions.  If the root folder is used, then the Home page may also use the include page.
The path to the buttons from the include page will be exactly the same as the path from the pages containing the include, satisfying the restriction that those relative paths must be identical.
In the same way, shared borders could be used if the pages using them were saved in the _borders folder - but are we that desperate?


3- Root Relative Paths

Problems with relative paths can be resolved by using root-relative paths.

A relative path takes the form: ../images/button4.gif
A root-relative path takes the form: /images/button4.gif
An absolute path takes the form: http://www.example.com/images/button4.gif

With a root relative, or absolute, path the link to the button will always be the same, regardless of the location of the page or button.

After inserting the buttons into the page, save the page so that the button images are saved and the "final" image paths are established in the code. Switch to Code View and locate the HTML for the button.

In the event handlers, change the path to the image to a root relative path.

Example: (taken from left_inc.htm)

<td><a href="index.html"><img border="0" id="img3" src="images/button2C.gif"
height="20" width="100" alt="Interative Home"
fp-style="fp-btn: Soft Capsule 10; fp-font-style: Bold; fp-font-size: 8;
fp-transparent: 1" fp-title="Interative Home"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2D.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')">
</a></td>

Here the URLs in the onmouse... events must be changed to: (enboldened for clarity)

onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'/images/button2D.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'/images/button2C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'/images/button2E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'/images/button2D.gif')"

Similarly, the preload images call in the <body> tag must be edited, to convert the image links to root-relative.

If the page is being edited in a Disc-Based web, the root of the web will be the root folder of the disc drive.  Obviously the buttons will not display until the web is published.  The same applies if the web being edited is actually a sub web on a server being used for editing purposes only (IIS5.1 on Windows XP Pro, for example).


4 - Move the JavaScript

Moving the behaviours javascript to an external file is a "belt and braces" solution to the problem where the rollovers fail to function with JavaScript errors.  Note that due to difficulties with Expression Web, this has been done in every page in this section. The JavaScript has been copied to   /_themes/fp_functions.js  - Note the root relative path.

  • Create a new page - in Expression Web use File->New Page and click JavaScript. In FrontPage 2003 use File->New  and choose a Text file from the task pane.
  • Open a page with Interactive buttons and switch to code view.
  • Find the JavaScript in the <head> section of the page and cut it from the markup.
    The script will start with:
    <script language="Javascript">  or <script type="text/javascript">
    and continue with function definitions for
    function FP_swapImg() {//v1.0
    function FP_preloadImgs() {//v1.0
    function FP_getObjectByID(id,o) {//v1.0

    ending with
    </script>
  • Copy the javascript into the new page.
  • Remove the opening and closing script tags (and any HTML comment markup)
  • Save the new page with a .js extension - for example save as fp_functions.js
  • In every page that uses Interactive buttons add the line:
    <script type="text/javascript" src="fp_functions.js"></script>
    ensuring that the path to the script file is correct (the example above assumes the script file is in the same folder as the page).

If the javascript in the page does disappear, the javascript in the external sheet will be used. This is duplication - but bad things happen.