                                                                                                                                                        <!--
/*
 Pleas leave this notice.
 DHTML tip message version 1.2 copyright Essam Gamal 2003 (http://migoicons.tripod.com, migoicons@hotmail.com)
 All modifications are done in the style.js you should not modify this file.  Created on : 06/03/2003
 Script featured on and can be found at Dynamic Drive (http://www.dynamicdrive.com)
*/

var ua = navigator.userAgent
var ps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root = ((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var PX = (nn6)? "px" :""

if(sNav) {
        window.onresize = ReloadTip
        document.onmousemove = MoveTip
        if(nn4) document.captureEvents(Event.MOUSEMOVE)
}
if(nn4||nn6) {
        mx = "e.pageX"
        my = "e.pageY"
        scl = "window.pageXOffset"
        sct = "window.pageYOffset"
        if(nn4) {
                obj = "document.TipLayer."
                sl = "left"
                st = "top"
                ih = "clip.height"
                iw = "clip.width"
                vl = "'show'"
                hl = "'hide'"
                sv = "visibility="
        }
        else obj = "document.getElementById('TipLayer')."
}
if(ie4||ie5) {
        obj = "TipLayer."
        mx = "event.x"
        my = "event.y"
        scl = "eval(doc_root).scrollLeft"
        sct = "eval(doc_root).scrollTop"
        if(ie5) {
                mx = mx+"+"+scl
                my = my+"+"+sct
        }
}
if(ie4||dom){
        sl = "style.left"
        st = "style.top"
        ih = "offsetHeight"
        iw = "offsetWidth"
        vl = "'visible'"
        hl = "'hidden'"
        sv = "style.visibility="
}
if(ie4||ie5||ps>=20020823) {
        ww = "eval(doc_root).clientWidth"
        wh = "eval(doc_root).clientHeight"
}
else {
        ww = "window.innerWidth"
        wh = "window.innerHeight"
        evlh = eval(wh)
        evlw = eval(ww)
        sbw=15
}

function applyCssFilter(){
        if(cssFilters&&FiltersEnabled) {
                var dx = " progid:DXImageTransform.Microsoft."
                TipLayer.style.filter = "revealTrans()"+dx+"Fade(Overlap=1.00 enabled=0)"+dx+"Inset(enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=in enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=out enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=in enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=out enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=in enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=out enabled=0)"+dx+"Iris(irisstyle=STAR,motion=in enabled=0)"+dx+"Iris(irisstyle=STAR,motion=out enabled=0)"+dx+"RadialWipe(wipestyle=CLOCK enabled=0)"+dx+"RadialWipe(wipestyle=WEDGE enabled=0)"+dx+"RadialWipe(wipestyle=RADIAL enabled=0)"+dx+"Pixelate(MaxSquare=35,enabled=0)"+dx+"Slide(slidestyle=HIDE,Bands=25 enabled=0)"+dx+"Slide(slidestyle=PUSH,Bands=25 enabled=0)"+dx+"Slide(slidestyle=SWAP,Bands=25 enabled=0)"+dx+"Spiral(GridSizeX=16,GridSizeY=16 enabled=0)"+dx+"Stretch(stretchstyle=HIDE enabled=0)"+dx+"Stretch(stretchstyle=PUSH enabled=0)"+dx+"Stretch(stretchstyle=SPIN enabled=0)"+dx+"Wheel(spokes=16 enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=reverse enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=reverse enabled=0)"+dx+"Zigzag(GridSizeX=8,GridSizeY=8 enabled=0)"+dx+"Alpha(enabled=0)"+dx+"Dropshadow(OffX=3,OffY=3,Positive=true,enabled=0)"+dx+"Shadow(strength=3,direction=135,enabled=0)"
        }
}

function stm(t,s) {
  if(sNav) {
          if(t.length<2||s.length<25) {
                var ErrorNotice = "DHTML TIP MESSAGE VERSION 1.2 ERROR NOTICE.\n"
                if(t.length<2&&s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array and Text Array of this tip.\nTheir should be 25 entries in every Style Array even though empty and 2 in every Text Array. You defined only "+s.length+" entries in the Style Array and "+t.length+" entry in the Text Array. This tip won't be viewed to avoid errors")
                else if(t.length<2) alert(ErrorNotice+"It looks like you removed an entry or more from the Text Array of this tip.\nTheir should be 2 entries in every Text Array. You defined only "+t.length+" entry. This tip won't be viewed to avoid errors.")
                else if(s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array of this tip.\nTheir should be 25 entries in every Style Array even though empty. You defined only "+s.length+" entries. This tip won't be viewed to avoid errors.")
         }
          else {
                var ab = "" ;var ap = ""
                var titCol = (s[0])? "COLOR='"+s[0]+"'" : ""
                var txtCol = (s[1])? "COLOR='"+s[1]+"'" : ""
                var titBgCol = (s[2])? "BGCOLOR='"+s[2]+"'" : ""
                var txtBgCol = (s[3])? "BGCOLOR='"+s[3]+"'" : ""
                var titBgImg = (s[4])? "BACKGROUND='"+s[4]+"'" : ""
                var txtBgImg = (s[5])? "BACKGROUND='"+s[5]+"'" : ""
                var titTxtAli = (s[6] && s[6].toLowerCase()!="left")? "ALIGN='"+s[6]+"'" : ""
                var txtTxtAli = (s[7] && s[7].toLowerCase()!="left")? "ALIGN='"+s[7]+"'" : ""
                var add_height = (s[15])? "HEIGHT='"+s[15]+"'" : ""
                if(!s[8])  s[8] = "Verdana,Arial,Helvetica"
                if(!s[9])  s[9] = "Verdana,Arial,Helvetica"
                if(!s[12]) s[12] = 1
                if(!s[13]) s[13] = 1
                if(!s[14]) s[14] = 200
                if(!s[16]) s[16] = 0
                if(!s[17]) s[17] = 0
                if(!s[18]) s[18] = 10
                if(!s[19]) s[19] = 10
                hs = s[11].toLowerCase()
                if(ps==20001108){
                if(s[2]) ab="STYLE='border:"+s[16]+"px solid"+" "+s[2]+"'"
                ap="STYLE='padding:"+s[17]+"px "+s[17]+"px "+s[17]+"px "+s[17]+"px'"}
                var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"'><A HREF='javascript:void(0)' ONCLICK='stickyhide()' STYLE='text-decoration:none;color:"+s[0]+"'><B>Schließen</B></A></FONT></TD>":""
                var title=(t[0]||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
                var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+s[14]+"' BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+titBgCol+" ><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0' CELLPADDING='"+s[17]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[13]+"' FACE='"+s[9]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
                if(nn4) {
                        with(eval(obj+"document")) {
                                open()
                                write(txt)
                                close()
                        }
                }
                else eval(obj+"innerHTML=txt")
                tbody = {
                        Pos:s[10].toLowerCase(),
                        Xpos:s[18],
                        Ypos:s[19],
                        Transition:s[20],
                        Duration:s[21],
                        Alpha:s[22],
                        ShadowType:s[23].toLowerCase(),
                        ShadowColor:s[24],
                        Width:parseInt(eval(obj+iw)+3+sbw)
                }
                if(ie4) {
                        TipLayer.style.width = s[14]
                         tbody.Width = s[14]
                }
                Count=0
                move=1
          }
  }
}

function MoveTip(e) {
        if(move) {
                var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height = parseInt(eval(obj+ih)+3)
                tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih = parseInt(eval(wh+"+"+sct))
                switch(tbody.Pos) {
                        case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
                        case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
                        case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break
                        case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break
                        default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
                }

                if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
                if(tbody.wih<tbody.Height+Y+sbw) {
                        if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
                        else Y = MouseY-tbody.Height
                }
                if(X<0) X=0
                eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
                ViewTip()
        }
}

function ViewTip() {
          Count++
        if(Count == 1) {
                if(cssFilters&&FiltersEnabled) {
                        for(Index=28; Index<31; Index++) { TipLayer.filters[Index].enabled = 0 }
                        for(s=0; s<28; s++) { if(TipLayer.filters[s].status == 2) TipLayer.filters[s].stop() }
                        if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
                        var applyTrans = (tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
                        var advFilters = (tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
                        var which = (applyTrans)?0:(advFilters)? tbody.Transition-23:0
                        if(tbody.Alpha>0&&tbody.Alpha<100) {
                                  TipLayer.filters[28].enabled = 1
                                  TipLayer.filters[28].opacity = tbody.Alpha
                        }
                        if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
                                  TipLayer.filters[29].enabled = 1
                                  TipLayer.filters[29].color = tbody.ShadowColor
                        }
                        else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
                                  TipLayer.filters[30].enabled = 1
                                  TipLayer.filters[30].color = tbody.ShadowColor
                        }
                        if(applyTrans||advFilters) {
                                eval(obj+sv+hl)
                                  if(applyTrans) TipLayer.filters[0].transition = tbody.Transition
                                  TipLayer.filters[which].duration = tbody.Duration
                                  TipLayer.filters[which].apply()
                        }
                }
                 eval(obj+sv+vl)
                if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters)) TipLayer.filters[which].play()
                if(hs == "sticky") move=0
          }
}

function stickyhide() {
        eval(HideTip)
}

function ReloadTip() {
         if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
         else if(hs == "sticky") eval(HideTip)
}

function htm() {
        if(sNav) {
                if(hs!="keep") {
                        move=0;
                        if(hs!="sticky") eval(HideTip)
                }
        }
}


/*
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 DESIGNsed 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,"",""]*/



//-->