## page was renamed from HelpCenter Tip/Adding a Home button to the WebWorks Help 5.0 Page Navigation Tools
= Adding a Home button to the WebWorks Help 5.0 Page Navigation Tools =
Here's how to add a Home button to the page navigation toolbar in a WebWorks Help 5.0 system.
An example of this can be seen here:
http://download.autodesk.com/us/maya/2008help/wwhelp/wwhimpl/js/html/wwhelp.htm
To add the button, you need to create overrides for the following files:
* '''wwhelp\wwhimpl\common\scripts\controls.js'''<
>In this file, you need to modify some JavaScript.
* '''wwhelp\wwhimpl\common\html\pagenav.htm'''<
>In this file, you need to modify the width of a frame in the HTML frameset.
Refer to the ePublisher Pro online help for instructions on how to create overrides.
Open your override version of '''controls.js'''
Locate this line:
{{{
function WWHControls_LeftHTML()
}}}
Scroll through the WWHControls_LeftHTML() function until you find these lines:
{{{
// Emit HTML for controls
//
VarHTML += this.fTopSpacerHTML();
if (VarEnabledControls.length > 0)
{
VarHTML += "\n";
VarHTML += " \n";
VarHTML += " | \n";
for (VarMaxIndex = VarEnabledControls.length, VarIndex = 0 ; VarIndex < VarMaxIndex ; VarIndex++)
{
VarHTML += VarEnabledControls[VarIndex].fGetHTML();
if ((VarIndex + 1) < VarMaxIndex)
{
VarHTML += " | \n";
}
}
VarHTML += "
\n";
VarHTML += "
\n";
}
}
return VarHTML;
}
}}}
Immediately before the `for` command, add these lines to the WWHControls_LeftHTML() function:
{{{
VarHTML += "![\"Home\"](\"") | ";
VarHTML += " | \n";
}}}
-- and change the MYFILENAME.html and MYHOMEICON.gif text in the lines as needed.
* MYFILENAME.html is the filename for the help topic to which you want to link. In the example linked at the beginning of this article, they are using index.html to link to the help system's default page.<
><
>If you want to link to a page outside of your help system, such as a website, change --<
><
>`><
>-- to --<
><
>`><
>-- where www.example.com is your URL. Clicking the home button will open the target site in a new browser window.
* MYHOMEICON.gif is the filename for the image you want to use for the home button. In your override directory, create a wwhelp/wwhimpl/common/images/ folder structure and place your home icon in the images folder. Also, adjust the height, width, and alt attributes to match the height and width of your icon and the alternate text for the image.
The first line inserts your Home icon and link.
The second line inserts a space between the Home icon and the next button.
The edited function should look like this:
{{{
// Emit HTML for controls
//
VarHTML += this.fTopSpacerHTML();
if (VarEnabledControls.length > 0)
{
VarHTML += "\n";
VarHTML += " \n";
VarHTML += " | \n";
VarHTML += " | ";
VarHTML += " | \n";
for (VarMaxIndex = VarEnabledControls.length, VarIndex = 0 ; VarIndex < VarMaxIndex ; VarIndex++)
{
VarHTML += VarEnabledControls[VarIndex].fGetHTML();
if ((VarIndex + 1) < VarMaxIndex)
{
VarHTML += " | \n";
}
}
VarHTML += "
\n";
VarHTML += "
\n";
}
}
return VarHTML;
}
}}}
Save the override file. Make sure you have created the wwhelp/wwhimpl/common/images/ folder structure in your override directory and have placed your home button image in the images directory.
Open your override version of '''pagenav.htm'''
Locate this line:
{{{