Applets by JObjects.net

 
Fugazi Consulting Ltd

     Animated Image Menu

Offline Documentation :

Microsoft Word Document : jonetMenu4.doc (105k)
Text Document : jonetMenu4.txt (19k)

 
Online Documentation :

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 must change the names of the image files listed in the example HTML above to suit your image file names.  You can use your own file(s) or an image from the supplied example buttons.zip file.

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 / tooltip_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">

<param name="tooltip_8" value="This will appear in the status bar">

 

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.  The tooltip_n parameter is optional.

 

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

 

Values for the hoveranimation_n parameter are as follows :

 

0                    No animation when the user points at the button

1                    Scroll the button in from left to right and back out again

2                    Scroll the button in from right to left and back out again

 

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

 

Color Hex Values and URL Target Values

More information on calculating color hexadecimal values and what URL Target window values mean can be found here.


Download Demo

There is a demo version which you can use to try out the Java (TM) applet before purchasing.  Demo version is fully functional, but menu options will always send the user to this page.  Replace the name of the class in the html specified on the documentation page with jonetMenu4Demo.class, alternatively use the examples supplied in the zip file.

Download here : jonetMenu4Demo.class
Download example buttons here : buttons.zip (24k)

Download including demo class file, all documentation and examples : jonetMenu4Demo.zip (107k)

 

 
 

[home]   [products]   [site map]   [license information]   [support]   [links]

Buy and Download

Click to return to main page.

Support

Having problems ?  Can't get it to work ? Confused ? We're here to help !  Click here for our Support Page

[Java (TM) Trademark Disclaimer - click here]
Java and all Java-based marks are a trademark or registered trademark of Sun Microsystems, Inc, in the United States and other countries.

[Copyright © 1997 - 2004 Fugazi Consulting Limited - All rights reserved. ]

 
 

TrafficFile :

  • Want to know who's visiting your site ?  For everything from a free feature rich hit counter to Advanced Web Site and Visitor Tracking, click here

    Web Hosting :

    • Are you looking for a better web hosting company ? Superb web hosting at a Superb price, click here 

      Recommended Links :

      • After Graphs and Charts ? MANMAN development ? For further information click here
      • Learning Web Development ? JScript ? Indispensable books we recommend can be found here