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