CuteButtons Installation Instructions

CuteButtons is ( Copyright 1997, P. Lutus.

CuteButtons is CareWare. Please see http://www.arachnoid.com/careware.

The CuteButtons Java applet creates a row of buttons for site navigation. When the visitor passes his mouse cursor over the buttons, they change color and appearance. When a button is clicked, the applet moves to the selected page and the selected button changes color. See http://www.arachnoid.com for an example of the buttons in a typical setting.

CuteButtons relies on both frames and Java for its effects - a browser must support both for the applet to work as intended.

Here is a typical setup sequence for CuteButtons:

1. Create a directory for the CuteButtons applet class files and the site index page. Let's say for this example that we have called this directory "buttoncontrol."

In this download package you will find the following files:

installation.rtf
installation.txt
button.class
mybutton.class

The first two files are different versions of the file you are now reading. The other two files are the required class files for the Cute Buttons applet. Place the two class files in the "buttoncontrol" directory you created.

2. Create a frames-aware HTML page containing code that looks more or less like this (this is not a complete page):

<FRAMESET ROWS="40,*" frameborder="0" framespacing="0" border="0">

<FRAME SRC="buttoncontrol/siteindex.html" NAME="windex"  NORESIZE scrolling="no" marginwidth="0" marginheight="5" frameborder="0" framespacing="0">

<FRAME SRC="frontpage.html" NAME="wmain" NORESIZE scrolling="auto" frameborder="0" framespacing="0">

<NOFRAMES>

<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<Center>
<Table border=1 width=80% align=Center Colspec="L20 " cellpadding=20 bgcolor="#ffffc0">
<Tr><Td align=center><FONT COLOR=#0000ff>Your browser does not support frames. Tsk, tsk. You will be automatically moved to the non-frames version of my front page in five seconds. But I strongly recommend that you update your browser.
</FONT>
</Td></Tr>
</Table>

<meta http-equiv="refresh" content="5; url=frontpage.html">

</Center>
</BODY>

</NOFRAMES>

</FRAMESET>

This code block sets up a frame window at the top of the page for the CuteButtons applet, places the site's main page in the center of the display, and provides for the possibility that the visitor's browser doesn't support frames. It also names the two frame windows "windex" and "wmain" for future reference.

3. The above-referenced "buttoncontrol/siteindex.html" page contains this code (this is not a complete page):

<BODY BGCOLOR="#000000" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<CENTER>

<applet
    code=buttons.class
    name=buttons
    width=640
    height=25 >
	<param name="b1" value="Top|../frontpage.html|The main www.arachnoid.com page">
	<param name="b2" value="Articles|../idx_articles.html|Books, articles, slides, graphic images">
	<param name="b3" value="Applications|../idx_applications.html|Online, interactive Java/JavaScript applications">

	<param name="b4" value="Programming|../idx_programming.html|Programming resources inc. Arachnophilia">

	<param name="b5" value="Math etc.|../idx_math_etc.html|Math articles, jokes, interesting Web sites">

	<param name="b6" value="Members|../idx_members.html| Member home pages plus more resources">

	<param name="b7" value="Feedback|../lutusp/sign_in.htm|Guest book, E-mail">

	<param name="targetwindow" value="wmain">
	<param name="bgcolor" value="#000000">


<A HREF="../frontpage.html" target="wmain">Top</A> |
<A HREF="../idx_articles.html" target="wmain">Articles</A> |
 <A HREF="../idx_applications.html"  target="wmain">Applications</A> |
 <A HREF="../idx_programming.html"  target="wmain">Programming</A> |
 <A HREF="../idx_math_etc.html"  target="wmain">Math etc.</A> |
 <A HREF="../idx_members.html"  target="wmain">Members</A> |
 <A HREF="../lutusp/sign_in.htm"  target="wmain">Feedback</A><p>

</applet>

</CENTER>

</BODY>

This code block launches the applet if the visitor's browser supports Java, and provides a conventional list of links if the browser does not. In keeping with normal frames coding, all the links and the applet itself are pointed to the main target window "wmain."

The "targetwindow" parameter show above is required to direct the page changes to the correct window. The "bgcolor" parameter sets the background color for the entire applet.

Each button is defined in this way:

<param name="b1" value="Top|frontpage.html|The main www.arachnoid.com page">

The name of the definition must be the lowercase letter "b" followed by a digit, as shown in the code example above. In the value field, vertical bars '|' separate the button label, the target URL and the status line message.

Here are some examples of definitions:

Button Index
Button Label
Target URL
Status Line Message
B1
Top
frontpage.html
The main page
B2
Articles
idx_articles.html
Some articles and books
B3
Applications
idx_applications.html
Online applications

The button label is the text that appears on the button itself. The target URL is the address of the target for this button. The status line message appears on the browser status line when the mouse cursor is over the button.

4. Font Face and Size

There are optional specifications for font face and size:

<param name="fontface" value="Helvetica">
<param name="fontsize" value="14">

The value for "fontface" must be one of the following list, and case must be preserved:

Dialog
Helvetica
TimesRoman
Courier
DialogInput
ZapfDingbats

The default values in CuteButtons are Helvetica and 14 point. If you change the size of the font, each button changes size automatically in response, and you may have to adjust the size of the applet, and the size of the frame window, to compensate for this.

5. Controlling button color

All the button colors can be customized.

The following button states are defined:
	
	n = 1 mouse not over
	n = 2 mouse over
	n = 3 activated
	n = 4 activated in the past
	
The following button state color specifications are defined:
	
	bc(1-4) background color for state (n)
	fc(1-4) foreground (oval) color for state (n)	
	tc(1-4) text color for state (n)

This example --

<param name="fc3" value="#00ff00">

-- makes the foreground color for an activated button green.

Experiment with these values.

