| DHTML
Tip Message version 1.2
What is this?
This is a DHTML Tip Message that enhances websites with
small popup information boxes to help visitors around
your website.
Acknowledgments
Actually the original idea of the tip message is not mine
I got the idea from Mr. (Erik Bosrup) as he is the first to create this
script. However the discrepancy and difference in the implementations of the tip message are an ocean wide,
but however you may find some similar features. I (Essam
Gamal) rewrote the hole script in my own way and added
different new features so I could say that the credit of the
original idea goes to Mr. (Erik Bosrup) but the script
development and the implementation's credit goes to me.
What you may do to help me
Since this is free please
don't try to sell this solution to a company claiming it
is yours. Give me credit where credit is due and I'll be
happy. Pleas report any bugs and if you have any new ideas or
features that you think I should add pleas submit them .
And I'd love to see any changes you've done to the
code Email Me at migoicons@hotmail.com. Free to use don't abuse.
What version this is?
This is version 1.2 . Make sure you check back to My Home Page now and then for new and
even better versions. This file and the source was last
edited on
06/03/2003. This version
is compatible with Netscape 4 + And Microsoft Internet Explorer 4+ and Opera 7.x
the code has been tested on all those browsers.
What's new in
this version?
New feature added:
Error notifications added to help you define the Style and Text array
correctly. If you remove an entry space or index from the Text or Style array an
alert box pops up notifying you about the error. For example the Text array
should always have two entries, one for the title which is the first entry and
one for the text which is the second entry Text[0]=[title(Entry
One), text(Entry two)]. But however if you by mistake remove an
entry like this Text[0]=[title(Entry One)] any
alert box pops up the same goes for the Style array.
Important: To leave an entry empty you don't remove it rather you leave it with
two quotes around it Example:
Text[0]=[
"",
"This has no title" ].
Bugs fixed :
The script didn't work properly when you declared
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> at the top of your HTML document,
specially in ns6 +.
In nn4 if you
declared the
<SCRIPT language="JavaScript1.2" src="main.js"
type="text/javascript"></SCRIPT> in
the <HEAD> section you had to reload
the page before the tip message worked.
Sites using DHTML
Tip Message.
Send me a note
if your sites uses DHTML Tip Message
and it will be listed here.
No one has listed
their site yet. I will visit all the site that use this script and see how they
used it and if I like an implementation I will list it on my web site as a demo
with a direct link from where I got it. listing your web site also encourages to
make new better versions because it tells me that people are using it. Pleas
also tell me how you rate this product.
Instructions:
Step One:
Insert the following code right under the <HEAD>
tag
<SCRIPT language="JavaScript1.2" src="main.js"
type="text/javascript"></SCRIPT>
Insert the following code right under the <BODY> tag and in the same order
first the <DIV>
tag then the style.js and make sure you linked to
the js files correctly.
<DIV
id="TipLayer"
style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></DIV>
<SCRIPT language="JavaScript1.2" src="style.js"
type="text/javascript"></SCRIPT>
Step Two:
Setting the
style and the text of the tip message.
Open the style.js you will find two arrays The
Text[...]
and the Style[...].
Setting the Text Array : in The Text array you
have 2 different options in this order.
Text=[...]=[title,text]
Here is The break down.
1 Title
:
Sets the tip message's title leave empty for none. you
may also insert single quoted html tags. example <font
color='red'>
single quoted </font>. [QUOTES
REQUIRED!!]
2
Text :
Sets the tip message's body text you may also insert
single quoted html tags. [QUOTES
REQUIRED!!]
Setting the Style Array : in the Style array you
have 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]
Here is The break down.
1
TitleColor :
Sets the title's
text color the bold text at the top you could
use HEX values like #ffffff or normal like white [QUOTES REQUIRED!!]
2
TextColor :
Sets the text's
text color in the tip message. You could use
HEX values like #ffffff or normal like white [QUOTES
REQUIRED!!]
3
TitleBgColor :
Sets the title's background Color
leave empty to make transparent [QUOTES
REQUIRED!!]
4
TextBgColor :
Sets the text's background Color
empty to make transparent [QUOTES REQUIRED!!]
5
TitleBgImag :
You may want to insert a background Image for the TITLE
rather than a background color, if the image is not in the
same directory or folder as your html file enter the full
location of the Image Example : ["pictures/bgimg.gif"] and don't forget to specify
the image's extension .jpg , gif ect [QUOTES
REQUIRED!!]
6
TextBgImag :
You may want to insert a background Image for the TEXT
rather than a background color, if the image is not in the
same directory or same folder as your html file enter the
full location of the Image Example : ["pictures/bgimg.gif"] and don't forget to specify
the image's extension .jpg , gif ect [QUOTES
REQUIRED!!]
7
TitleTextAlign :
Sets
the position or Alignment
of the TITLE, you have 3 choices left which is the default, center, right
Leave Empty for
left [QUOTES REQUIRED!!]
8
TextTextAlign :
Sets the
position or Alignment of the TEXT, you have 3 choices left which is the default, center, right
[QUOTES REQUIRED!!]
9
TitleFontFace :
Sets the
title's font family or face Example ["Tahoma"] Leave Empty for
Verdana,Arial,Helvetica Which is the default [QUOTES
REQUIRED!!]
10
TextFontFace :
Sets the
TEXT'S font family or face Example ["Tahoma"] Leave Empty for
Verdana,Arial,Helvetica Which is the default [QUOTES
REQUIRED!!]
11
TipPosition :
Sets the tip message's popup position you have 5 choices left , center, right,
float,
fixed
if you set it as
1 left
the tip message will popup on the left side of the mouse.
2 center the tip message will popup
in the center , the mouse will be in the center of the
tip message.
3 right: this is the default
position you may leave the entry empty or set it as right.
In this case the tip message will popup on the right side
of the mouse
4 float: the tip message will not
move with the mouse rather it will popup at the
coordinates of the X,Coordinate and
Y,Coordinate entries. And if you
scroll down or left the scroll values are added to the X,Coordinate and
YCoordinate
values so the tip message will always float in the same place no matter how much you
scroll left or right, in simple words "Static position"
5
fixed
: the tip message will not
move with the mouse rather it will popup at the
coordinates of the
YCoordinate and
YCoordinate entries And it will
not float with
the scrollbars.
[QUOTES REQUIRED!!]
12
StickyStyle :
Sets the Sticky
Style type of the tip message you have 2 choices
sticky , keep
1 sticky :
The tip message will not
hide after your mouse goes off the link and it will only be
positioned once .
A Close link is automatically generated and inserted at
the top right of the tip message so if you would like to
hide the tip message just click it. The properties (color,bgcolor
ect) of the close link are set from the title's
properties so the close link and title will have exactly
the same style and look as the title.
This is designed specially for the need of inserting
links in the tip message or any thing that involves using
the mouse in tip message's content. leave this entry
empty for none sticky style.
2
keep:
The tip message will not hide
after your mouse goes of the link rather the tip message will move with
your mouse around the page. This will produce the same effect as if you
didn't specify the mouse out function in the link.
[QUOTES REQUIRED!!]
13
TitleFontSize :
Sets the title's font size. Numbers only. You many use
negative or positive values like -1 or +1 or absolute values like 1, 2, 3 the default size is 1 [NO
QUOTES !!]
14
TextFontSize :
Sets the Text's font size. Numbers only you many use
negative or positive values like -1 or +1 or absolute values like 1, 2, 3 the default size is 1 [NO
QUOTES !!]
15
Width :
Sets the width of the tip message. Full Numbers only. The
default width is 200 [NO QUOTES !!]
16
height :
Sets the height of the tip message. Full Numbers only.
The default height is the height needed to fit the
content however you may want to add extra height, if
you do enter is value here. [NO QUOTES !!]
17
BorderSize :
Sets the border size which is the colored frame around
the tip message. Its color is set from the title's
bgcolor. and again Full Numbers only . if you don't want
a border set it as 0 or leave its entry empty. [NO
QUOTES !!]
18
PadTextArea :
Adds extra
padding to the area of the text this adds extra space from the left, top, right,
and bottom in the text content [NO QUOTES !!]
19
CoordinateX :
1 If the tip message's position is set as left
or right
it sets the X coordinate of the tip message relative to the
position of the mouse.
2 If the tip message's position is set as float
or fixed
it sets the X coordinate of the tip message relative to the window.
You may set positive or negative numbers.
The
default value is 10. [NO QUOTES !!]
20
CoordinateY :
1 If the tip message's position is set as left
or right
or center it sets the Y coordinate of the tip message 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 tip message relative to the window.
You may set positive or negative numbers.
The
default value is 10. [NO QUOTES !!]
21
Transition :
Sets the transition number. The transition is the cool
visual effect when the tip message shows. You have a
choice from 0 to
51 different effects, 23 is random for
the 22 first effects and 51 is random for all. To disable the
transition set the value to -1. Full Numbers only . 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 !!]
22
TransitionDuration :
Sets the duration of the transition the time desired of
transition action in seconds. You may use decimal numbers
such as 0.3 or full numbers like 1 . Setting the value to 0 also disables the transition.
This requires Microsoft Internet Explorer 5.5 or later. [NO
QUOTES !!]
23
TransparencyLevel :
Add transparency level from 1 to 99 the decreasing values
increase transparency so if you set it to 1 you will
barley see the tip message and that's if you have good
eyesight, if you set it to 99 it will be least
transparent get the point?. Set 0 for none. This requires
Microsoft Internet Explorer 5.5 or later. [NO
QUOTES !!]
24
ShadowType :
You may apply one of two shadow styles simple or complex leave empty for none. You
must also add a shadow color to enabled it. This requires
Microsoft Internet Explorer 5.5 or later. [QUOTES
REQUIRED!!]
25
ShadowColor :
Sets the shadow color. Leave empty to also disable the
shadow. This requires Microsoft
Internet Explorer 5.5 or later. [QUOTES
REQUIRED!!]
Step Three
Implementing them in link tags.
To implement the tip message
you use a link with these two function assigned to it .
The stm which means show tip message
and htm which mean hide tip message.
Example
<A href="#"
onMouseOver="stm(Text[2],Style[0])"
onMouseOut="htm()">this
is a link</A>
The tip message attached to
this link will take the Text from the Text[2] Array and the
Style from the Style[0] Array .
Make sure that both the Text array and
Style begin with a capital letter.
Text[2]=["This
is the title","Well How do you find this Tip
message to be?. "]
Style[0]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""]
Try this Example in the link
below
this
is a link
Notice that I left some
entries empty in the Style array . When you leave an
empty entry the default value is implemented for that
entry. You may leave all the entries empty for the
complete default style. And also notice where I used
quotes and where I didn't .To put it simple use quotes
around text entries and don't use them around numbers .
For every new
style or text increase the index value by one starting from 0
Text[0], Text[1] /// Style[0], Style[1]
ect . Oh and make sure you didn't use repetitive Arrays. Example:
having two arrays the same Style[0], Style[0]. You
may use the same Style and
Text array again in any other link, so if you want all the tips to have
the same style and different content use the same Style array in all of
them and different Text arrays. The same goes with
the Text array.
Well that's all
their is to set it .... if you still don't understand or if
you have any bugs pleas email me. Thanks and enjoy
|