Copy codeThe Code is as follows:
<Span style = "font-size: 14px;"> <script type = "text/javascript">
Var eposx;
Var eposy;
Function showRequest (pid, event ){
Eposx = event. clientX;
Eposy = event. clientY;
Var url = "tip. jsp ";
Var params = 'pid = '+ pid +' & time = '+ (new Date (). toString ();
SendRequest (url, params, 'get', showDetail );
}
// Dynamically load the data department list
Function showDetail (){
If (httpRequest. readyState = 4 ){
If (httpRequest. status = 200 ){
Var membersData = httpRequest. responseXML. getElementsByTagName ("member ");
Var membersList = document. getElementById ("detail ");
// Insert data into the list box cyclically
Var li = '<table> ';
For (var I = 0; I <membersData. length; I ++ ){
Var price = membersData [I]. childNodes [0]. firstChild. nodeValue;
Var num = membersData [I]. childNodes [1]. firstChild. nodeValue;
Var chandi = membersData [I]. childNodes [2]. firstChild. nodeValue;
Li + = '<tr> <td> price:' + price + '</td> </tr> ';
Li + = '<tr> <td> quantity:' + num + '</td> </tr> ';
Li + = '<tr> <td> origin:' + chandi + '</td> </tr> ';
}
Li + = '</table> ';
MembersList. innerHTML = li;
SetDivPosition ();
MembersList. style. visibility = 'visable ';
} Else {// The page is abnormal.
Alert ("the page you requested has an exception ");
}
}
}
Function hidendiv (){
Var membersList = document. getElementById ("detail ");
MembersList. innerHTML = '';
MembersList. style. visibility = 'hiden ';
}
Function setDivPosition (){
Var goodslist = document. getElementById ('goodslist ');
Eposx = goodslist. offsetLeft + goodslist. offsetWidth-2;
Eposy + = goodslist. offsetTop-100;
Var listdiv = document. getElementById ('detail ');
Listdiv. style. left = eposx + 'px ';
Listdiv. style. border = 'Blue 1px solid ';
Listdiv. style. top = eposy + 'px ';
Listdiv. style. width = '100px ';
Listdiv. style. zIndex = '20140901 ';
}
</Script>
</Head>
<Body>
<H1> data prompt <Hr/>
Product list:
<P id = "goodslist" style = "float: left;" onmouseout = "hidendiv ();">
<A href = "javascript: void (0);" onmouseover = "showRequest ('p1', event);"> item A </a> <br/>
<A href = "javascript: void (0);" onmouseover = "showRequest ('p2 ', event);"> item B </a> <br/>
<A href = "javascript: void (0);" onmouseover = "showRequest ('p3 ', event);"> item C </a> <br/>
</P>
<Div id = "detail" style = "background-color: green; position: absolute; visibility: hidden">
</Div> </span>