Author: Danilo Kozub Homepage: http://DanKozub.tripod.com
Last update: March 19th, 2000
v1.2 - March 3rd, 2000
Special effects ("gradient fill", "rectangle",
"underline", 'light" , "3D button")
new color constants (blue-)
v1.3 - March 9th, 2000
new color constants (blue+40,red-20)
New effects ("lightline","sphere")
v1.4 - March 14th, 2000
Animated text color supported
v1.5 - March 19th, 2000
Animated colors improvements
Animated color support for background,
"underline","rect" and "gradient" effects
"UpdateTime" parameter added
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_v1_5.class" height="25" width="120"> <param name="Background" value="background1.jpg|#F8E0C8"> <param name="HREF" value="http://DanKozub.tripod.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> |
||
Main features:
Download: EasyButton.zip(23K)
The latest version of this applet you can always be found at my site (http://DanKozub.tripod.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 |
| Copyright | string | preset | Should be set to "(c) Danilo Kozub, 2000, http://DanKozub.tripod.com, Dan_Kozub@fnmail.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_v1_5.class"
height="20"
width="105">
<param name="Background"
value="|blue-">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000,
http://DanKozub.tripod.com, Dan_Kozub@fnmail.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.tripod.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_v1_5.class"
height="20"
width="105">
<param name="Background"
value="background1.jpg">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000,
http://DanKozub.tripod.com, Dan_Kozub@fnmail.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.tripod.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_v1_5.class"
height="18"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000,
http://DanKozub.tripod.com, Dan_Kozub@fnmail.com">
<param name="HREF"
value="http://DanKozub.tripod.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_v1_5.class"
height="18"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000, http://DanKozub.tripod.com,
Dan_Kozub@fnmail.com">
<param name="HREF"
value="http://DanKozub.tripod.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_v1_5.class"
height="30"
width="140">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000,
http://DanKozub.tripod.com, Dan_Kozub@fnmail.com">
<param name="HREF"
value="http://DanKozub.tripod.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_v1_5.class"
height="30"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000,
http://DanKozub.tripod.com, Dan_Kozub@fnmail.com">
<param name="HREF"
value="http://DanKozub.tripod.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_v1_5.class"
height="30"
width="105">
<param
name="Copyright"
value="(c) Danilo Kozub, 2000,
http://DanKozub.tripod.com, Dan_Kozub@fnmail.com">
<param name="HREF"
value="http://DanKozub.tripod.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.
Feel free to ask questions or send your comments to me.
(1.1.2000)