My script creates a comprehensive DHTML tip message to help describe important links on your webpage. Modeled after a similar script by Eric Bosrup, it is extremely versatile in its placement and special effects to render as the tooltip is being displayed. The script supports over 26 different configuration parameters! Overall an excellent script that works cross browser (IE4+, NS4+, Opera 7+).
this is how the script should be implemented on your web site.
<HTML>
<HEAD>
// Make sure that you upload the main15.js to your
server and include a link to it as the following
<SCRIPT language="JavaScript1.2"
src="main15.js"
type="text/javascript""></SCRIPT>
<TITLE></TITLE>
</HEAD>
<BODY>
// The following code is the <div> tag which
is needed for the tip message work. The <div> tag should be
right under the <body> tag NO where else will do!. In the
generator you will be given the option of specifying the ID of the
<div> tag. After generation if you changed the div tag's ID
or removed it or miss placed it where it should be under the body tag
the script will popup an alter box telling you that something is wrong
with the div tag.
<DIV id="tiplayer"
style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></DIV>
// And now for the Text and Style array
configuration.
Lets say that you wanted to create 3 tip messages that look the same
(Same Style array used) with different text and title (different Text
arrays used) for each tip. If so your code should look should look
something like this but with your configuration of course.
<SCRIPT language="JavaScript1.2"
>
//The Text array parameters come in the following
order Text[...]=[title,text]
Text[0]=["this is title
one","this is text one"]
Text[1]=["this is title
two","this is text two"]
Text[2]=["this is title
three","this is text three"]
//The Style array parameters come in the following
order
Style[...]=[titleColor,TitleBgColor,TitleBgImag,TitleTextAlign,TitleFontFace,TitleFontSize,TextColor,TextBgColor,TextBgImag,TextTextAlign,TextFontFace,
TextFontSize,Width,Height,BorderSize,BorderColor,Textpadding,transition
number,Transition duration,Transparency level,shadow type,shadow
color,Appearance behavior,TipPositionType,Xpos,Ypos]
Style[0]=["white","","","","",,"black","#ffffcc","","","",,,,2,"#b22222",2,24,0.5,0,2,"gray",,2,,13]
// these are global settings
var TipId="tiplayer" // should be the same
as <div> tag's id
var FiltersEnabled = 1 // should be the set as to 1
if your going to use visual effects if not set to 0
mig_clay()
</SCRIPT>
// Now that we created our Text and Style arrays
needed lets implement them in the link tags by using a reference to
the arrays by their index number in the STM function
<a href="your url"
onMouseOver="stm(Text[0],Style[0])" onMouseOut="htm()">Tip One</A>
<a href="your url" onMouseOver="stm(Text[1],Style[0])"
onMouseOut="htm()">Tip
two</A>
<a href="your url" onMouseOver="stm(Text[2],Style[0])"
onMouseOut="htm()">Tip
three</A>
//Of course you may create more links using
the same code these are three tips exactly the same
<a href="your url"
onMouseOver="stm(Text[1],Style[0])" onMouseOut="htm()">Tip four</A>
<a href="your url" onMouseOver="stm(Text[1],Style[0])"
onMouseOut="htm()">Tip
five</A>
<a href="your url" onMouseOver="stm(Text[1],Style[0])"
onMouseOut="htm()">tip
six</A>
</BODY>
</HTML>
Note:
If your going to use the same code on many pages its
recommend that you use an external .js file to do that simply copy the
array configuration code WITH OUT THE SCRIPT TAGS JUST WHAT'S
BETWEEN IT and save it as style.js and include and link to it just
like the main15.js but the link to the style.js should be in the body
tag just under the div tag and also be sure to up load it to your
server.