We know that after adding the title attribute to some HTML tags, when this tag object is viewed, a small prompt box will pop up when you move the cursor up and display the content defined by the title. The img of the Image Tag also has an alt attribute that can play a similar role. However, it is clear that this prompt box is too monotonous. For this reason, some people use JavaScript to implement a beautiful prompt box effect. This effect is often used in WEB games, netease mail and thunder video pages use this effect. Although there are some differences in their implementation effects, the overall implementation idea remains unchanged. To help you understand the implementation details and customize the desired results, I found a good source code on the Internet and commented on it in detail, hoping to help you.
Code with comments:
The Code is as follows:
/*************************************** ********
One JavaScript Title, alt prompt (Tips) source code explanation
Code comment: Tang Guohui
Author blog: http://webflash.cnblogs.com
**************************************** *******/
// Define the getElementById shortcut
Function $ (obj)
{
If (typeof (obj) = 'object ')
{
Return obj;
}
Else
{
Return document. getElementById (obj );
}
}
// Define the document. write shortcut instead of complex DOM operations
Function $ P (str)
{
Document. write (str );
}
// Script Error Blocking
Window. onerror = function ()
{
Return true;
};
/*
Define variables:
PltsPop (prompt text, from the alt or title attribute of the object, excluding HTML)
ToolTip (the prompt content DOM object, that is, the content variable defined later)
PltsPoptop (the title DOM object is displayed above)
PltsPopbot (the title DOM object is displayed below)
TopLeft (the title DOM object is displayed in the upper left corner)
BotLeft (the title DOM object is displayed at the bottom left)
TopRight (the title DOM object is displayed in the upper right corner)
BotRight (the title DOM object is displayed in the lower right corner)
*/
Var pltsPop, toolTip, pltsPoptop, pltsPopbot, topLeft, botLeft, topRight, botRight;
// Set the position offset of the prompt window relative to the prompt object
Var pltsoffsetX = 10;
Var pltsoffsetY = 15;
Var pltsTitle = "";
// Create an absolute Hidden Layer
$ P ('
');
// Assign the created layer object to a variable. This statement must appear after the layer is created.
Var pltsTipLayer = $ ('pltstiplayer ');
// Define the processing function when you move the cursor over the object. It extracts the alt or title attribute values and initializes the HTML and style of the prompt box.
Function PltsMouseOver (ev)
{
// Compatible with events and object acquisition from different browsers
Var Event = window. event | ev;
Var o = Event. srcElement | Event.tar get;
// If the object's alt attribute exists and is not empty, save its value to the dypop attribute and clear the content of the current alt
If (o. alt! = Null & o. alt! = "")
{
O. dypop = o. alt;
O. alt = "";
}
// Make the same judgment and processing on objects with the title attribute as above. Clearing the title attribute value makes the default prompt effect of the object invalid.
If (o. title! = Null & o. title! = "")
{
O. dypop = o. title;
O. title = "";
}
PltsPop = o. dypop;
If (pltsPop! = Null & pltsPop! = "" & Typeof (pltsPop )! = "Undefined ")
{
// Display the prompt layer created above. It is temporarily moved to the left far away. Although it is displayed, it cannot be seen by the user.
PltsTipLayer. style. left =-1000;
PltsTipLayer. style. display = '';
/*
Format the prompt and replace \ n
For example, if the title value is defined as follows, it is displayed as a line between the author and gender, because there are:
Article title...
*/
Var Msg = pltsPop. replace (/\ n/g ,"
");
Msg = Msg. replace (/\ 0x13/g ,"
");
// Define a regular expression to check whether the prompt content contains "{prompt title}" similar to this, and the {} and {} are excluded from the prompt content, if not, the "Introduction" is used as the title by default.
Var re =/\ {(. [^ \ {] *) \}/ig;
If (! Re. test (Msg ))
{
PltsTitle =" Introduction";
}
Else
{
Re =/\ {(. [^ \ {] *) \} (. *)/ig;
// Extract content from {}
PltsTitle = Msg. replace (re, "$1") + "";
// Replace {content}, including {}, with null to get the content of the final prompt body.
Re =/\ {(. [^ \ {] *) \}/ig;
Msg = Msg. replace (re ,"");
}
// Define the Html and Style content in the prompt box, and put the obtained content in the corresponding variable
Var content ="
-
"+ PltsTitle +"
"+ PltsTitle +"
-
"+ Msg +"
-
"+ PltsTitle +"
"+ PltsTitle +"
";
PltsTipLayer. innerHTML = content;
ToolTip = $ ("toolTip ");
PltsPoptop = $ ("pltsPoptop ");
PltsPopbot = $ ("pltsPopbot ");
TopLeft = $ ("topLeft ");
BotLeft = $ ("botLeft ");
TopRight = $ ("topRight ");
BotRight = $ ("botRight ");
// Set the width of the prompt box. The size is the minimum value between the size of the prompt box and the half of the size of the visible window in the browser. That is, after the browser window is smaller than the width of the prompt box, the size of the prompt box is automatically adjusted to a new width.
Tooltip.style.width+math.min(pltstiplayer.clientwidth,document.doc umentElement. clientWidth/2.2) + "px ";
}
Else
{
PltsTipLayer. innerHTML = '';
PltsTipLayer. style. display = 'none ';
}
}
// Define the processing function when the mouse moves over the object. An event is triggered every pixel it moves.
Function PltsMouseMove (ev)
{
If (pltsTipLayer. innerHTML = '')
Return true;
Var Event = window. event | ev;
// Obtain the current X and Y coordinates of the cursor
Var MouseX = Event. clientX;
Var MouseY = Event. clientY;
// Obtain the width and height of the prompt box
Var popHeight = pltsTipLayer. clientHeight;
Var popWidth = pltsTipLayer. clientWidth;
// If the current cursor Y coordinate + the Y axis offset of the prompt box + the height of the prompt Box> the visible height of the current window, the objects to be prompted at the bottom of the window are generally processed, for example, this is the case when a link in the footer needs to be prompted.
If (MouseY + pltsoffsetY + popHeight> document.doc umentElement. clientHeight)
{
// When the prompt box is displayed above the prompt object, an additional value popTopAdjust is required as the basis for final positioning of the prompt box.
PopTopAdjust =-popHeight-pltsoffsetY * 1.5;
PltsPoptop. style. display = "none ";
PltsPopbot. style. display = "";
}
Else
{
PopTopAdjust = 0;
PltsPoptop. style. display = "";
PltsPopbot. style. display = "none ";
}
// Determine whether to use the left or right title
If (MouseX + pltsoffsetX + popWidth> document.doc umentElement. clientWidth)
{
PopLeftAdjust =-popWidth-pltsoffsetX * 2;
TopLeft. style. display = "none ";
BotLeft. style. display = "none ";
// The following two titles are displayed. In fact, only one title is displayed, because topRight is a child element of pltsPoptop. If pltsPoptop is not displayed, the topRight display cannot be seen, as does botLeft.
TopRight. style. display = "";
BotRight. style. display = "";
}
Else
{
PopLeftAdjust = 0;
TopLeft. style. display = "";
BotLeft. style. display = "";
TopRight. style. display = "none ";
BotRight. style. display = "none ";
}
// Set the final position value of the prompt box after comprehensive processing to the object, where scrollTop is the height of the webpage being rolled because of style. top is relative to the entire document rather than the browser window, so the height of scrolling and hiding must be calculated. The same applies to scrollLeft.
Pltstiplayer.style.left?mousex=pltsoffsetx=document.doc umentElement. scrollLeft + popLeftAdjust + "px ";
Pltstiplayer.style.top?mousey=pltsoffsety=document.doc umentElement. scrollTop + popTopAdjust + "px ";
Return true;
}
// Define the event binding function
Function PltsInit ()
{
Document. onmouseover = PltsMouseOver;
Document. onmousemove = PltsMouseMove;
}
// Call the event binding function
PltsInit ();
Call method: Save the above Code to an external independent JS file, and then include the JS file on the webpage. Finally, add the title attribute to the object to be prompted, you can add the alt attribute to the image. Example: title or
Related links:
1. http://www.cnblogs.com/czh-liyu/archive/2007/12/30/1021146.html
2. http://boxover.swazz.org
3. http://blog.csdn.net/lanmao100/archive/2008/10/31/3191767.aspx
