Div layer follows the mouse position display prompt

Although IE also provides the prompt function, you only need to assign a value to the title attribute as follows: Code <A href = "http://chenxp2032.blog.163.com/blog/#" Title = "this a test"> bring your own instructions </a> This prompt is very monotonous, the mouse is displayed when moving up, when the mouse moves above, the prompt information will not follow, and the difference between the following custom prompt information is very clear, so custom prompt information is necessary.
Method 1:
Place the mouse over the link to see how to customize the prompt information. It is easy to say, first draw the prompt information layer, and then locate the target object. The following describes the implementation in three parts:

1) Draw the information layer

There are two methods, one is static, the HTML code of the layer is written in the document, the other is dynamic, dynamic creation layer using JavaScript scripts. Static mode is simple, not flexible, and dynamic, but it is difficult. You need to be familiar with the script and Dom structure. The following Code creates a prompt layer dynamically.

Function createdivtooltip ()

{

VaR divtips = Document. createelement ('div '); // create Div Element

Divtips. ID = 'tooltip ';

Divtips. style. Display = 'none' // invisible

Document. Body. appendchild (divtips );

}

2) fixed bit information layer

Function locate (E)

{E = E | window. event;

VaR divtips = Document. getelementbyid ('tooltip ');

VaR mousepos = getmouseposition (E); // get the coordinate of the mouse

Divtips. style. Top = mousepos. Top-12 + "PX ";

Divtips. style. Left = mousepos. Left-8 + "PX ";

} For details about how to position the mouse in the document, refer to "get the coordinates of the mouse".

3) additional events

<A href = "http://chenxp2032.blog.163.com/blog/" Title = "this is a test for tooltip" onmouseover = "showtooltip (event);" onmousemove = "locate (event ); "onmouseout =" hidetooltip (event); "& gt; click To Do Something </a> the code above adds three events to a link, the message is displayed when the onmouseover mouse is moved over the link. When the onmousemove mouse moves over the link, the message follows. When the onmouseout mouse moves over the link, the message is hidden, although the above Code can implement the functions, it is not very good, because you need to add events one by one for each link, and there will be a lot of links in the actual development of a page, which is inconvenient, the better way is to implement the following code:

Function prepare (ID)

{

If (ID = NULL) links = Document. getelementsbytagname ("");

Else links = Document. getelementbyid (ID ). Getelementsbytagname ("");

For (I = 0; I <links. length; I ++ ){

Attachevent (Links [I]);

}

}

Function attachevent (Link)

{

If (! Link) return;

Link. attachevent ("onmouseover", showtooltip );

Link. attachevent ("onmousemove", locate );

Link. attachevent ("onmouseout", hidetooltip );

}

The preceding three simple user-defined prompts are completed. Some special prompts are specially processed on the created layer. For example, we often see the rounded corner prompts, the background image is added to the layer.

Method 2:

VaR div_xx = 0;
VaR div_yy = 0;
Function keyd (divid ){
VaR OBJ = Document. getelementbyid (divid );
OBJ. style. cursor = "move ";
Div_xx = event. clientX-obj.getBoundingClientRect (). Left;
Div_yy = event. clientY-obj.getBoundingClientRect (). Top;
Tow (OBJ );
}
Function keyu (divid ){
VaR OBJ = Document. getelementbyid (divid );
Invalid parameter Doc ument. OnMousemove = NULL;
OBJ. style. cursor = "default ";
}
Function tow (OBJ ){
Invalid parameter Doc ument. OnMousemove = function (){
Modiv (OBJ );
};
}
Function modiv (OBJ ){
OBJ. style. Top = event. clienty + document. Body. scrollTop-div_yy;
OBJ. style. Left = event. clientx + document. Body. scrollLeft-div_xx;
}

 

Add an event to the sub-element in the DIV:

OnMousedown = "keyd ('divid ')"

OnMouseup = "keyu ('divid ')"