Author: Danilo Kozub Homepage: http://DanKozub.com
Last update: April 9th, 2000
v2.2 - April 9th, 2000
Support of counters
More reliable user font loading algorithm
v2.0 - April 4th, 2000
User fonts support :
Image loading enhanced
v1.5 - March 19th, 2000
Animated colors improvements
Animated color support for background,
"underline","rect" and "gradient" effects
"UpdateTime" parameter added
v1.4 - March 14th, 2000
Animated text color supported
v1.3 - March 9th, 2000
new color constants (blue+40,red-20)
New effects ("lightline","sphere")
v1.2 - March 3rd, 2000
Special effects ("gradient fill", "rectangle",
"underline", 'light" , "3D button")
new color constants (blue-)
EasyButton is my version of the very popular type of applets to create animated menu buttons and decorate your page. It was designed to make the process of creating new cool buttons much easier.
Sample 1 (default shadow, animated red bullet, sound, animated text color):
Only 4 images were used for this menu | ||
![]() |
||
![]() |
||
![]() |
||
![]() |
||
Sample 2 (no sound, 2 images for 2nd state):
Only 3 images were used for this menu | HTML
code for each button looks like this: <applet code="EasyButton_v2_5.class" height="25" width="120"> <param name="Background" value="images/background1.jpg|#F8E0C8"> <param name="HREF" value="http://DanKozub.com"> <param name="Image1" value="button1.gif"> <param name="Image2" value="button2.gif|1|1"> <param name="Image4" value="tri_blue.gif|110|7"> <param name="text" value="JAVA|left|30|15|arial|10|bold|black|lightGray|0"> <param name="text2" value="||31|16||||blue"> </applet> |
||
![]() |
|||
![]() |
|||
![]() |
The latest version of this applet you can always be found at my site (http://DanKozub.com) if you downloaded this page from other site.
If you want to be notified about applets updates just send me a message with the subject "Add to EasyButton mail list".
Please, send me URL of your page with EasyButton menu - I'd like to create list of EasyButton users and choose the best designer.
Parameter | Type | Default value | Description, format |
HRef | string | "" | URL location |
Target | string | "_self" | Target frame |
Text | string | "" | "ButtonText
| h.alignment | x | y | font name | font size | font style | text color |
shadow color | shadow size|ouline_size" - text and its attributes Default values are bold: h.alighment -- "left" or "right", x - defines offset from the the margin x --"-1","0","1"...., if x== -1 then text is centered horizontally y --"-1","0","1"...., if y== -1 then text is centered vertically font name -- "Arial", "Times New Roman", etc. font style -- "plane", "italic", "bold", "bold italic" text color -- "black", "red", #FF00DD, etc. (see remark after this table) shadow color - "grey", etc. shadow size -- "1,0,2,..." outline size -- "0,1,2" |
Text2 | sting | $Text | The same parameters for the text to be displayed on the button when the mouse is over |
Image1, Image3 | string | "" | "image | x | y" - reference to the images to be displayed in the normal state |
Image2, Image4 | string | $Image1 | Reference to the images to be displayed on the button when the mouse is over |
Background | string | null | "background image | background color" - Image and color that will be used for filling background. |
Sound, Sound2 | string | null | Sounds to be played when entering and exiting the button |
Effect1,..3,..5,..7,..9 | string | null | "Effect name|param1|param2..." - effects to be applied for normal state |
Effect2,..4,..6,..8,..10 | string | null | "Effect name|param1|param2..." - effects to be applied for mouse over state |
Status | string | null | String to be displayed on the status bar |
UpdateTime | string | 50 | Update frequency for animated colors |
UserFont | string | null | "source image | density | height | y_offset | x_offset" |
Counter1, ..., Counter4 | string | null | "path_to_counter_script | when_load | probability | x | y" |
Copyright | string | preset | Should be set to "(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com" |
REM: Colors can be set by
following string constants: "red", "green",
"blue", "pink", "orange", "magenta",
"cyan", "white", "yellow", "gray",
"grey", "black", "darkGray", "lightGray"
of hex expressions like "#FF0000".
From the version 1.2 you can use string constants with modificators: "blue-"-
darker version of blue, "magenta+" - brighter version of
"magenta"
From the version 1.3 you can use string constants with modificators: "[color]
[+/-] [n]" where n=0-100, i.e [blue-50] darker version of blue, color+100=white,
color-100=black, color+50=(color+white)/2 ,
etc.
Sounds should be in "AU" format. Animated gifs can be used as parameters.
Move mouse cursor over the button to see color animation
Description: Draw rectangle of defined width and color
sequence
Arguments: "rect | width | anim_color1| anim_color2 | anim_color3 |
anim_color4 | color5 | ..."
HTML code:
<applet code="EasyButton_v2_5.class"
height="20"
width="105">
<param name="Background"
value="|blue-">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="Effect1"
value="rect |3 |blue |white |blue">
<param name="Effect2"
value="rect |3 |white,1000,100>blue,1000
| white,1000,200>blue,1000 | white,1000,200>blue,1000">
<param name="HREF"
value="http://DanKozub.com">
<param name="text"
value="DOWNLOAD||||arial|12|bold|white||0">
<param name="text2"
value="|||||||yellow||">
</applet>
Please note animated colors for mouseover state of rectangle (Effect2)
There are also similar effects to draw and fill oval:
drawoval - parameters: "drawoval | width |
color1| color2 | color3 | ..."
filloval - parameters: "filloval | color"
Description: Draw line of defined width and color sequence
Arguments: "underline | width | anim_ color1| anim_ color2 | anim_ color3 |
anim_color4 | color5 | ..."
HTML code:
<applet code="EasyButton_v2_5.class"
height="20"
width="105">
<param name="Background"
value="images/background1.jpg">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="Effect1"
value="underline|3|blue|white|blue">
<param name="Effect2"
value="underline|3|blue|red|blue">
<param name="HREF"
value="http://DanKozub.com">
<param name="text"
value="DOWNLOAD||||arial|12|bold|blue-||0">
<param name="text2"
value="|||||||red||">
</applet>
Description: Draw 3D button
Arguments: "fill3drect | elevation | light color | dark color | button
color "
HTML code:
<applet code="EasyButton_v2_5.class"
height="18"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="HREF"
value="http://DanKozub.com">
<param name="Effect1"
value="fill3drect|3|blue|black|blue-">
<param name="Effect2"
value="fill3drect|3|blue|black|blue-">
<param name="text"
value="Button
One||||arial|10|bold|white|gray|0">
<param name="text2"
value="|||||||yellow||0">
</applet>
This effect is combination of two effects, that can be used separately:
fillrect - parameters: "fillrect | color
"
draw3drect - parameters: "draw3drect | elevation | light color |
dark color "
|
Move mouse cursor over the button to see color animation
Description: Gradient fill
Arguments: "gradient | color1 | color2 | vertical/horizontal |
centered/plain "
HTML code:
<applet code="EasyButton_v2_5.class"
height="18"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="HREF"
value="http://DanKozub.com">
<param name="Effect1"
value="Gradient | blue- | black | horizontal |
centered">
<param name="Effect2"
value="Gradient |
blue,1000>black,1000 | black,1000>blue,1000
| vertical ">
<param name="text"
value="Button
One||20||arial|10|bold|white|gray|0">
<param name="text2"
value="|||||||yellow||0">
</applet><BR>
Description: Light
Arguments: " Light | color1 | color2"
Remark: This effect is quite slow
HTML code:
<applet code="EasyButton_v2_5.class"
height="30"
width="140">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="HREF"
value="http://DanKozub.com">
<param name="Effect1"
value="light |red |black">
<param name="Effect2"
value="light |red+30 |black">
<param name="text"
value="Button
One||||arial|10|bold|white|gray|0">
<param name="text2"
value="|||||||yellow||0">
</applet>
Description: Lightline
Arguments: " Lightline | color1 | color2"
HTML code:
<applet code="EasyButton_v2_5.class"
height="30"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="HREF"
value="http://DanKozub.com">
<param name="Effect1"
value="lightline |blue |black">
<param name="Effect2"
value="lightline |blue+30 |black">
<param name="text"
value="Button
One||||arial|10|bold|white|gray|0">
<param name="text2"
value="|||||||yellow||0">
</applet>
Arguments: "Sphere | brightest color | medium color |
darkest color | background color | x | y | diameter"
Remark: diameter should be even number, default value for y is center of
the applet
HTML code:
<applet code="EasyButton_v2_5.class"
height="30"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com,
mail@DanKozub.com">
<param name="HREF"
value="http://DanKozub.com">
<param
name="Effect1"
value="sphere|red+50|red|red-70|black|120||26">
<param name="Effect2"
value="sphere|blue+50|blue|blue-70|black|120||26">
<param
name="text"
value="Button
One||||arial|10|bold|white|gray|0">
<param name="text2"
value="|||||||yellow||0">
</applet>
As you have already noticed you can use animated colors
for text, background and some effects.
Animated color can be set by sequence of colors and transition periods between
them.
Each color can be defined by string constant (blue, red, etc.), string constant with modifiers (red+50, blue-30, etc) or by hex number (#FF0000, #FBAA34, etc). Time should be set in milliseconds.
The simplest example of animated colors can be defined by
the following string:
"black,-1000>red,-1000". Minus means that colors wouldn't be
mixed.
It will look like this:
If you want colors to transform one into other set color
to "black,1000>red,1000" and you'll get this:
Number of colors in the sequence is unlimited, so you can
create more complicated effects by using similar string:
"black,-1000>black,100>red+20,100>red,500":
To create wave effect similar to the top buttons of this page, you can set delay for the redraw cycle. All you have to do is to add this parameter to the definition of the first color: "black,1000,100>red,1000". Red number means that animation will be delayed for 100ms relative to other buttons.
You can set your EasyButton to load counter images when some events happen
and with certain probabilities.
You can use up to 4 counters by adding the following parameters:
<param name="counter[N]" value="path_to_counter_script | when_load | probability | x | y ">
Example:
<param name="counter1" value="/bin/counter/counter1
| always | 0.01 | 0 | 0 ">
<param name="counter2" value="/bin/counter/counter2
| click | 1 | 40 | 0 ">
In the above example one counter will be loaded once per 100 page loads, another counter - every time the button is pressed.
To see current values of counters click on the button with pressed SHIFT and CONTROL
http://www.jcoms.com/ - Great examples and templates by Chuck Shirley
Mail me to add link to your great site with EasyButtons
Feel free to ask questions or send your comments to me.
(1.1.2000)