Div layer follows the mouse position display prompt

Source: Internet
Author: User
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 ')"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.