|
EXAMPLES
You can include a
title
bar in the box message or
leave it without it. You can position the box as
right,
center,
left,
float or
fixed.
You can make the box message
sticky or
keep it moving with the mouse around the page.
You can also control the
left and the
top coordinates of the message from the mouse.
You can add
visual effects to the
box message, or customize the
whole style
to your liking. You can also insert
any
HTML tags you want.
1) Download
this ZIP file with
the main.js and style.js script files and unzip into the appropriate directory.
2) Insert this script in the <HEAD> section of the page.
3) Insert the following code anywhere in the <BODY> section of the page.
4) Insert the onMouseOver and onMouseOut functions
inside the link tag as follows:
<A href="yourpage.html" onMouseOver="stm(Text[0],Style[1])" onMouseOut="htm()">Your
text</A>
Assign the array number for the text (Text[0])
and the style (Style[1]), which are defined in the style.js file.
5) Define the content and the different styles of the box messages in the style.js
file:
There are two arrays; the Text[...] and the
Style[...].
In the Text array there are 2 different options, Title and Text.
Sets the tip message's title (leave empty for none) and the body text. You may
also insert single quoted html tags.
For example:
Text[0]=["PlanMagic.com","Business planning software."]
Text[1]=["","<b>SimplytheBest DHTML Scripts</b><br><font color='red'>A
collection of the best DHTML script and Javascripts on the Web.</font>"]
In the Style array there are 25 different options in this order.
Style[...]=[TitleColor, TextColor, TitleBgColor, TextBgColor, TitleBgImag,
TextBgImag, TitleTextAlign, TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width,
Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber,
TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
| Style properties |
| TitleColor |
Sets the title's text color. You can use HEX values
(#FFFFFF) or color names (white). [Quotes required!] |
|
TextColor |
Sets the body text color. [Quotes required!] |
|
TitleBgColor |
Sets the title's background color, leave empty to
make transparent. [Quotes required!] |
| TextBgColor |
Sets the text's background color, leave empty to
make transparent. [Quotes required!] |
| TitleBgImag |
You may want to use a background image for the
Title bar rather than a background color (f.e. "images/bgimg.gif"). [Quotes
required!] |
| TextBgImag |
You may want to use a background image for the
Message box rather than a background color. [Quotes required!] |
| TitleTextAlign |
Sets the alignment of the Title. You have 3
choices: left (which is the default, leave empty), center and right. [Quotes
required!] |
| TextTextAlign |
Sets the alignment of the Text. Left (which is the
default, leave empty), center and right. [Quotes required!] |
| TitleFontFace |
Sets the title's font family. Leave empty for Verdana,Arial,Helvetica,
which is the default. [Quotes required!] |
| TextFontFace |
Sets the text's font family. Leave empty for Verdana,Arial,Helvetica,
which is the default. [Quotes required!] |
| TipPosition |
Sets the tip message's popup position. There are 5 choices: left, center, right,
float and fixed. [Quotes required!]
left - the box message will popup on the left side of the mouse.
center - the box will popup in the center, the mouse will be in the
center of the tip message.
right - the box will popup on the right side of the mouse.
float - the box will popup at the specified coordinates in CoordinateX and CoordinateY.
If you scroll down or left, the box will always float in the same spot.
fixed - the box will stay at the specified coordinates in CoordinateX and CoordinateY,
and it will not float
with the scrollbars. |
| StickyStyle |
Sets the Sticky style type of the box message. You have 2 choices: sticky and keep.
[Quotes required!]
sticky - the box message will not hide after your mouse goes off the link.
A Close link is automatically generated and inserted at the top right in the
title bar.
keep - the box message will not hide after your mouse goes off the link,
but it will move with your mouse around the page. |
| TitleFontSize |
Sets the title's font size. You can use negative or positive
values like -1 or +1, or absolute values like 1, 2, 3. The default size is 1. [No
quotes!] |
| TextFontSize |
Sets the text's font size. [No quotes!] |
| Width |
Sets the width of the box message. The default
width is 200. [No quotes!] |
|
Height |
Sets the height of the box message. The default
height is the height needed to fit the content, however you may want to add
extra height by entering a value here. [No quotes!] |
| BorderSize |
Sets the border size of the box message. Set it to
0 or leave it empty if you want it without borders. [No quotes!] |
| PadTextArea |
Adds extra padding to the area of the text. [No
quotes!] |
| CoordinateX |
1. If the box's position is set as left or right, it sets the X coordinate
of the box relative to the position of the mouse.
2. If the box's position is set as float or fixed, it sets the X
coordinate of the box relative to the window. You can use positive or
negative numbers. The default value is 10. [No quotes!] |
| CoordinateY |
1. If the box's position is set as left or right or center, it sets the Y
coordinate of the box relative to the position of the mouse.
2. If the tip message's position is set as float or fixed, it sets the Y
coordinate of the box relative to the window. The default value is 10. [No
quotes!] |
| Transition |
Sets the transition effect number, with a choice from 0 to 51 different effects, 23 is
random for the first 22 effects and 51 is random for all. To disable the
transition set the value to -1. Make sure that the FiltersEnabled
variable is set to 1 or the transition won't play. This requires Microsoft
Internet Explorer 5.5 or later. [No quotes!] |
| TransitionDuration |
Sets the duration of the transition effect in
seconds. You can use decimal numbers such as 0.3 or full numbers like 1. Setting
the value to 0 also disables the transition. [No quotes!] |
| TransparencyLevel |
Add transparency level from 1 to 99, the lower the
value the higher the transparency. Set to 0 for none. [No quotes!] |
| ShadowType |
You can apply one of the two shadow styles, simple
or complex. You must also add a shadow color to enable it. [Quotes required!] |
| ShadowColor |
Sets the shadow color. Leave empty to disable the
shadow. [Quotes required!] |
Have a look at dhtml_script_43
for other examples using the OverLib script.
For more information you can also
visit the author's
web site.
| 
