JavaObjects.net User Documentation
Animated Image Menu
Note : Graphics only available on on-line or Word document formats
http://www.javaobjects.net
(c) Fugazi Consulting Ltd 2003


Overview

An attention grabbing animated menu which “zooms” the buttons in from various directions (defined by you).  Uses image files for the buttons as supplied by you, so it integrates perfectly with the look and feel of your site.
•	Any size and any number of menu buttons
•	Uses graphics supplied by you to integrate seamlessly with your site
•	Use the same image per button, or have a different image for each
•	Animate the each button in up to 5 different styles
•	Play a sound on load, menu selection or mouse hover (optional)
•	If using the same image per button, specify font type, color and size for the button labels
•	Have a different image displayed for each button on mouse hover
•	Pause animation between each button, plus specify animation speed
•	Example buttons supplied
•	Demonstration version available

Applet can be set to display a single image for each button (with menu text for each button specified by you) along with an optional “hover over” image, to change the button’s appearance if the user hovers over that button.
Alternatively each button can use a different image (already incorporating the text for the menu), along with another optional “hover over” image per button, to change each buttons appearance if the user hovers over that button.


HTML Example – Single Image Per Button

<applet code="jonetMenu4.class" width=94 height=130>
<param name="picheight" value="26">

<param name="speed" value="10">
<param name="offset" value="20">
<param name="pause" value="no">

<param name="offImage" value="offImage.GIF">
<param name="onImage" value="onImage.GIF">

<param name="foreColor" value="FF0000">
<param name="backColor" value="FFFFFF">
<param name="fontstyle" value="Helvetica">
<param name="fonttype" value="plain">
<param name="fontsize" value="12">

<param name="buttontextleft" value="20">
<param name="buttontexttop" value="18">

<param name="soundappear" value="ding.wav">
<param name="soundhover" value="ding.wav">
<param name="soundclick" value="ding.wav">

<param name="menu_1" value="menu 1">
<param name="menu_2" value="menu 2">
<param name="menu_3" value="menu 3">
<param name="menu_4" value="menu 4">
<param name="menu_5" value="menu 5">

<param name="url_1" value="http://www.javaobjects.net">
<param name="url_2" value="http://www.javaobjects.net">
<param name="url_3" value="http://www.javaobjects.net">
<param name="url_4" value="http://www.javaobjects.net">
<param name="url_5" value="http://www.javaobjects.net">

<param name="target_1" value="_top ">
<param name="target_2" value="_top ">
<param name="target_3" value="_top ">
<param name="target_4" value="_top ">
<param name="target_5" value="_top ">

<param name="animation_1" value="1">
<param name="animation_2" value="2">
<param name="animation_3" value="3">
<param name="animation_4" value="4">
<param name="animation_5" value="0">

<param name="hoveranimation_1" value="1">
<param name="hoveranimation_2" value="2">
<param name="hoveranimation_3" value="1">
<param name="hoveranimation_4" value="2">
<param name="hoveranimation_5" value="1">

<param name="tooltip_1" value="choose my menu 1">
<param name="tooltip_2" value="choose my menu 2">
<param name="tooltip_3" value="choose my menu 3">
<param name="tooltip_4" value="choose my menu 4">
<param name="tooltip_5" value="choose my menu 5">

</applet>


HTML Example – Multiple Images Per Button

<applet code="jonetMenu4.class" width=94 height=90>
<param name="picheight" value="26">

<param name="speed" value="10">
<param name="offset" value="20">
<param name="pause" value="no">

<param name="offImage_1" value="button1off.GIF">
<param name="onImage_1" value=" button1on.GIF">
<param name="offImage_2" value=" button2off.GIF">
<param name="onImage_2" value=" button2on.GIF">
<param name="offImage_3" value=" button3off.jpg">
<param name="onImage_3" value=" button3on.jpg">

<param name="menu_1" value="">
<param name="menu_2" value="">
<param name="menu_3" value="">

<param name="animation_1" value="1">
<param name="animation_2" value="2">
<param name="animation_3" value="1">

<param name="hoveranimation_1" value="1">
<param name="hoveranimation_2" value="2">
<param name="hoveranimation_3" value="1">
	
<param name="url_1" value="http://www.javaobjects.net">
<param name="url_2" value="http://www.javaobjects.net">
<param name="url_3" value="http://www.javaobjects.net">

<param name="target_1" value="_top">
<param name="target_2" value="_top ">
<param name="target_3" value="_top ">

<param name="tooltip_1" value="choose my menu 1">
<param name="tooltip_2" value="choose my menu 2">
<param name="tooltip_3" value="choose my menu 3">

</applet>


Installation and Configuration

Download the class file.  Use the "Buy Now" button found on the website.

Copy the above code (in bold) into your HTML (note, not the content) of your web page, then copy the class file into the same directory.  Choose the relevant HTML code depending on whether you are using one image for each button, or individual images per button.

You can customise your applet by changing the following parameters (some or all of which are optional, i.e. can be omitted) :

 
width 
height		Adjust to suit the size of applet you wish to appear on your page.  For best effect, the width should be the same width as your button images (in pixels) and the height should be a multiplier of the height of your buttons (e.g. if you have 5 buttons at 25 pixels high, the height should be set to 125)

picheight	The height of each button image, in pixels.  All images must be the same height.

speed		The speed of the animation on load and unload. The higher the value, the faster the animation. Defaults to 5 if omitted

offset		The offset value used when displaying the buttons.  See below for more information.  Defaults to 0 if omitted.

pause		“yes” or “no”.  If you want the applet to fully finish the animation of the first button before starting the animation of the second button (and so on) then set to “yes”, otherwise if you want all the buttons to be animated at the same time set to “no” or omit the parameter.

offImage	SINGLE IMAGE : If using only one image per button, the image displayed when the user is not hovering over the button.  See below.

onImage		SINGLE IMAGE : If using only one image per button, the image displayed when the user is hovering the cursor over the button.  See below.

offImage_n	MULTIPLE IMAGES : If using many images, one per button, this is the image displayed when the user is not hovering over the nth button.  See below.

onImage_n	MULTIPLE IMAGES : If using many images, one per button, this is the image displayed when the user is hovering the cursor over the nth button.  See below.

backcolor	The background color to the applet.  This is the color of the area the user will see before the animation is finished.  Set to the same background color as your web page.  Defaults to white.

forecolor	If you want the applet to display the menu text over your button (rather than the text being part of the menu image itself) the following font and color parameters will be use (See below for further information).  The color of the main menu item text. Defaults to black if omitted.

fontstyle	Helvetica, TimesRoman or Courier.  Defaults to Helvetica if parameter is omitted

fonttype	Plain, Bold, Italic.  Defaults to Bold if parameter is omitted

fontsize	The size of the menu text.  Defaults to 11 if omitted
buttontextleft	Optional. Advanced User.  The space in pixels from the left edge of every button to the start of the text. Used for aligning the button text perfectly in the centre of the button.  Defaults to 14.

buttontexttop	Optional. Advanced User.  The space in pixels from the top edge of every button to the top of the text. Used for aligning the button text perfectly in the centre of the button.  Defaults to 14.

soundappear	Optional.  The wav file to play when the menu is initially drawn.

soundhover	Optional.  The wav file to play when the user hovers over a menu option.

soundclick	Optional.  The wav file to play when the user clicks on a menu option.

menu_n		The list of main menu texts, where 'n' starts at 1.  You must have at least two main menu texts (buttons). You can have any number of main menu texts (buttons).  If you are using multiple images (one per button) which already include the menu text, set to blank ( = “”)

animation_n	The animation on load/unload for each button, if required.  Set to ‘0’ for no animation.  See below.

hoveranimation_n	The animation when the user hovers over the button, if required.  Remove parameter completely for no animation.  See below 

url_n		The URL to go to if the user selects this menu option. 

target_n	The target window to open this URL in.  See below.

tooltip_n	A message that will appear in the browsers status bar when the user hovers over each button, one message per button.


Offset : the offset value can be used to “stagger” the images during the animation.  For example, if all your buttons scroll in from left to right, setting an offset of 0 would mean that all the buttons scroll in at the same time, and finish the animation at the same time.  Setting an offset value of, say, 10 would mean that the second button would appear fractionally after the first button, and the third button fractionally after the second (and so on) giving a stepped or cascade effect.

A negative value (e.g. –10) means that the second button appears before the first button slightly, third button before the second and so on.


Single / Multiple Images  :

You have two options with regards to the images and menu text displayed to the user.

The first option is a single on/off image, where the same image is used for each button, and the menu_n and font parameters are used to set the text for each menu.  The on/off images can be the same image file, if you don’t want the button’s appearance to change when the user hovers the mouse over the button.

The second option is to have a different on/off image for each button.  You can still use the menu_n options to display text over each button if you wish, or you can set the menu_n options to blank ( = “”) and embed the menu’s text into the image itself.  Again, each on/off image can point to the same file if no effect is required when the user hovers over a button.


menu_n / url_n / target_n / animation_n : 

You must have one menu_n value for every button you wish to display.

Note : there must be one url_n, one target_n and one animation_n parameter for every menu_n parameter, for example : 

<param name="menu_8" value="Option 8">
<param name="url_8" value="www.this.com">
<param name="target_8" value="_blank">
<param name="animation_8" value="1">

So, if you have 5 menu options being displayed you will have five parameters called menu_1 through menu_5, five parameters called url_1 through url_5, five parameters called target_1 through target_5 and five parameters called animation _1 through animation _5.

We recommend, for clarity of reading the HTML, that all the image parameters are grouped together, and all the url, target and animation parameters are grouped together, however this is not necessary for the applet to work.

Values for the animation_n parameter are as follows :

0	No animation, just draw the button
1	Scroll the button in from left to right
2	Scroll the button in from right to left
3	Scroll the button in from top down
4	Scroll the button in from bottom up

Each button can have it’s own animation style, so a mix and match effect can be created.


Support

Remember, if you are struggling to set up your applet, or are having problems, we are here to help.  Our support team can be contacted on support@javaobjects.net.  

Please supply as much information about your problem as possible, including the applet name you are having problems with, the HTML code you are using, and if relevant the URL of the site where the applet is being used.


URL Targets

URL Target Window parameters specify which browser window the destination URL will open up in, when the user clicks on a menu option or graphic (depending on the applet in question).

Valid values : 

_blank – open in a brand new window, leaving this window still open.  Note, using this option will mean the menu does not “animate out” when the user clicks (otherwise you would be left with a blank applet on the source page)

_top – open in the current window, whole page

_self – open in the current frame.  Only really used when using frames on your page.

_parent -  open in the parent window.

The most commonly used options will be _blank (new window) and _top (same window) which should cater for most scenarios.



Color Hexadecimal Values :

Color values used on HTML pages and Java applets are represented as six character hexadecimal values, where “000000” is pure black, “FFFFFF” is pure white, and ever other possible color combination can be found in between.

The six digits in each colour value can be split into three 2 character Red, Green and Blue values.  So, a value of “112233” means a Red value of 11, a Green value of 22 and a Blue value of 33.

A note on Hexadecimal representation :

As humans with, generally speaking, 10 fingers and 10 toes, we are used to the decimal number system, that is, a ten digit number system starting at 0 and going up to 9.  When we reach 9, we “roll over” back to zero again and, of course, add a 1 to the left hand side to give 10.

Whereas decimal has ten values per digit, hexadecimal has sixteen values per digit.  The standard ten from 0 to 9, but then of course we run out of occidental numbers.  So, we start using letters …. A for value 10, B for 11, C for 12, D for 13, E for 14 and F for 15.  Once we reach ‘15’ (or F) we “roll over” back to zero again, and add that one to the left, giving 10 (which is the equivalent of value 16 in decimal)

Here are a few example of hexadecimal (or “hex”) values and decimal values :

Hex 1 = Decimal 1
Hex 9 = Decimal 9
Hex A = Decimal 10
Hex 10 = Decimal 16
Hex 1F = Decimal 31
Hex FF = Decimal 255

So, how do we turn “slightly light blue” into a series of 6 hexadecimal characters ?

Well, the easiest way to do this, if you have a Windows operating system, is using the Paint package.   Open up Paint, then choose the menu options Colors / Edit Colors.  Click on the Define Custom Colors button to bring the color wheel up like this :
 
 <<graphic only available online / Word document>>

Choose the desired color you are after using the large color area, and chose the shade using the slider on the right.  Here we have chosen that light blue colour we love so much.

On the bottom right hand side you can see that there are three values – Red, Green and Blue.  But these values are represented in decimal (not hex) which is no use for web work.   We know our RGB values, we just need to convert them to hex !

The easiest way to do this is as follows.  Let’s take the Red value, 84.  Divide 84 by 16 to get 5.25.  At this point all we are bothered about is the integer part of this result, i.e. the 5.  That’s our first digit.   Take the 5 and times that by 16 to give 80.  Take 80 from the original number (84) to give a remainder of 4.  That’s our second digit.  So, the two characters which represent Red in hexadecimal is “54”.

Carry on and do the same for Green and Blue.  Let’s work through Green first.  175 / 16 = 10.9375.  Forget the .9375 and concentrate on 10.  We already know that in hex the value 10 is represented by the letter A so ‘A’ is our first digit.  10 * 16 = 160.  175 – 160 equals a remainder of 15.  15 we know is F in hex.  So, our Green value is ‘AF’

Finally blue.  203 / 16 = 12.6875.  Drop the .6875 to give 12, which is ‘C’.  12 * 16 = 192.  203 – 192 = 11 (or ‘B’).  So, our Green value is ‘CB’

Put the three values together, and we arrive at a color value for “slightly light blue” of “54AFCB” ….. result !

If this seems a little long winded or complicated, don’t worry.  Try this a few times, and pretty soon this will become second nature.

Examples :

 <<graphic only available online / Word document>>

 			Black			000000
 			White			FFFFFF
 			Light Gray		B0B0B0
 			Dark Gray		808080
 			Red			FF0000
 			Green			008000
 			Blue			0000FF
 			Dark Blue		000080
 			Bright Green		00FF00
 			Purple			800080
 			Light Purple		FF00FF
 			Brown			800000
 			Cyan			00FFFF
 			Yellow			FFFF00


 
License Information

Standard Software Disclaimers and Conditions

Fugazi Consulting Ltd hereby grants you a non-exclusive license to use its accompanying software product provided that :

1.	The Licensee does not redistribute the software, unless authorised to do so by Fugazi Consulting Ltd.
2.	The Licensee does not utilize the software in a manner which is disparaging to Fugazi Consulting Limited.
3.	No attempt is made to modify, translate, reverse engineer, decompile, disassemble or create derivative works based on the software.
4.	No attempt is made to rent, lease, transfer or otherwise transfer rights to the software, or remove any proprietary notices or labels on the software.

This license does not grant you any automatic right to any enhancement or update. 

Title, ownership rights, and intellectual property rights in and to the Software shall remain with Fugazi Consulting Ltd.  The Software is protected by the international copyright laws. Title, ownership rights, and intellectual property rights in and to the content accessed through the software is the property of the applicable content owner and may be protected by applicable copyright or other law. This License gives you no rights to such content. 

Java applets which are provided by this site on a free basis are offered "as is" without a warranty of any kind. 

Pertaining to all software, all expressed or implied conditions, representations and warranties, including any implied warranty of merchantability, fitness for a particular purpose or non-infringement, are hereby excluded.  Fugazi Consulting Ltd and it's licensors shall not be liable for any damages suffered by licensee as a result of using, modifying or distributing the software or it's derivatives.  In no event will Fugazi Consulting or it's licensors be liable for any lost revenue, profit or data, or for direct, indirect, special, consequential, incidental or punitive damages, however caused and regardless of the theory of liability, arising out of the use of or inability to use software, even if Fugazi Consulting has been advised of the possibility of such damages. 

This software is not designed or intended for use in on-line control of aircraft, air traffic, aircraft navigation or aircraft communications; or in the design, construction, operation or maintenance of any nuclear facility. Licensee represents and warrants that it will not use or redistribute the software for such purposes.