tooltip.html
tooltip.php
- <html>
- <head>
- <title>Ajax Tool Tip</title>
- <script type="text/javascript">
- <!--
- var xmlHttp;
- var dataDiv;
- var dataTable;
- var dataTableBody;
- var offsetEl;
- function createXMLHttpRequest() {
- if (window.ActiveXObject)
- {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- else if (window.XMLHttpRequest)
- {
- xmlHttp = new XMLHttpRequest();
- }
- }
- function initVars() {
- dataTableBody = document.getElementById("courseDataBody");
- dataTable = document.getElementById("courseData");
- dataDiv = document.getElementById("popup");
- }
- function getCourseData(element) {
- initVars();//定义参数
- createXMLHttpRequest();//创建xmlHttp
- offsetEl = element;//获取当前对象
- var url = "tooltip.php?key="+escape(element.id);//加密传送当前位置
- xmlHttp.open("GET",url,true);
- xmlHttp.onreadystatechange = callback;
- xmlHttp.send(null);
- }
- function callback() {
- if (xmlHttp.readyState == 4)
- {
- if ((xmlHttp.status == 200)|(xmlHttp.status == 0))//0本地相应
- {
- setData(xmlHttp.responseXML);
- }
- }
- }
- function setData(courseData) {
- clearData();
- setOffsets();
- var length = courseData.getElementsByTagName("length")[0].firstChild.data;
- var par = courseData.getElementsByTagName("par")[0].firstChild.data;
- var row,row2;
- var parData = "Par: " + par;
- var lengthData = "Length: " + length;
- row = createRow(parData);
- row2 = createRow(lengthData);
- dataTableBody.appendChild(row);
- dataTableBody.appendChild(row2);
- }
- function createRow(data) {
- var row,cell,txtNode;
- row = document.createElement("tr");
- cell = document.createElement("td");
- cell.setAttribute("bgcolor","#FFFAFA");
- cell.setAttribute("border","0");
- txtNode = document.createTextNode(data);
- cell.appendChild(txtNode);
- row.appendChild(cell);
- return row;
- }
- function setOffsets() {
- var end = offsetEl.offsetWidth;//整数 绝对宽度
- var top = calculateOffsetTop(offsetEl);//整数 相对于版面或是指定父坐标,计算出上侧位置
- dataDiv.style.border = "black 1px solid";
- dataDiv.style.left = end + 15 +"px";
- dataDiv.style.top = top + "px";
- }
- function calculateOffsetTop(field) {
- return calculateOffset(field,"offsetTop");
- }
- function calculateOffset(field,attr) {//相对于版面或是指定父坐标,计算出上侧位置
- var offset = 0;
- while (field)//逐级计算出相对位置,并叠加
- {
- offset += field[attr];
- field = field.offsetParent;
- }
- return offset;
- }
- function clearData() {
- var ind = dataTableBody.childNodes.length;
- for (var i = ind-1;i >=0 ;i-- )
- {
- dataTableBody.removeChild(dataTableBody.childNodes[i]);
- }
- dataDiv.style.border = "none";
- //dataDiv.setAttribute("border","none");
- }
- //-->
- </script>
- </head>
- <body>
- <h1>Ajax Tool Example</h1>
- <h3>Golf Courses</h3>
- <table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2" />
- <tbody>
- <tr><td id="1" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">Autusta National</td></tr>
- <tr><td id="2" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">Pinehurst No.2</td></tr>
- <tr><td id="3" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">St.Andrews</td></tr>
- <tr><td id="4" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">Baltusrol Golf</td></tr>
- </tbody>
- </table>
- <div id="popup" style="position:absolute;">
- <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" />
- <tbody id="courseDataBody"></tbody>
- </table>
- </div>
- </body>
- </html>
- <?php
- header('Content-Type: text/xml');
- $resArray = array (
- '1'=>array('par'=>'par1','length'=>'leng1'),
- '2'=>array('par'=>'par2','length'=>'leng2'),
- '3'=>array('par'=>'par3','length'=>'leng3'),
- '4'=>array('par'=>'par4','length'=>'leng4')
- );
- $key=$_GET['key'];
- $res="<response><par>".$resArray[$key]['par']."</par><length>".$resArray[$key]['length']."</length></response>";
- echo $res;
- ?>