Working around the restrictions when using Interactive Buttons
Interactive Buttons - Restriction workarounds
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- 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).