ajax onmouseover显示Tip

看到很多网站上面 鼠标停留在商品图片上面 边上显示出个提示层 显示些简单的商品信息 呵呵 研究了下 终于弄了个出来 通过《ajax基础教程》得到很大提示 但是它的有很多错 呵呵
var tmp=null; // 声明一个临时变量 存贮图片位置的表格
var xmlHttp = null;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
}

function getContent(obj){
createXMLHttpRequest();
tmp=obj;
var url = "/OnlineLeatherStore/product.do?method=showProTip&pid="+tmp.id;
xmlHttp.onreadystatechange = showtip;
xmlHttp.open("GET", url, true);
xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded; charset=gbk");
xmlHttp.send(null);
}

function showtip(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
clearData();
var end=calculateOffsetWidth(tmp);
var top=calculateOffsetTop(tmp);
document.getElementById('showtip').style.border='black 1px solid';
document.getElementById('showtip').style.left=end+15+'px';
document.getElementById('showtip').style.top=top+100+'px';
var typename=xmlHttp.responseXML.getElementsByTagName("tname")[0].firstChild.nodeValue;
var brandname=xmlHttp.responseXML.getElementsByTagName("bname")[0].firstChild.nodeValue;
var content=xmlHttp.responseXML.getElementsByTagName("content")[0].firstChild.nodeValue;
var row,row1,row2;
row=createRow(typename);
row1=createRow(brandname);
row2=createRow(content);
document.getElementById('tipbody').appendChild(row);
document.getElementById('tipbody').appendChild(row1);
document.getElementById('tipbody').appendChild(row2);
}
}
}


function calculateOffsetTop(tmp){ //计算显示层的高度
var offset=0;
offset=tmp.offsetParent.offsetTop; //父节点的高度
return offset;
}
//计算显示层的宽度 因为我的是3列商品 所以需要判断 用了一个很笨的方法 应该还有可以直接判断鼠标位置的方法 但是时间原因 没有去找了
function calculateOffsetWidth(tmp){
var offset=0;
tid=tmp.parentNode.id;
if(tid == '1'){
offset=tmp.offsetWidth; //当前窗体的宽度
}
else if( tid == '2'){
offset=tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth;
}
else if (tid=='3'){
offset=tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth;
}
return offset;
}

//构建一行
function createRow(data){
var row;
var cell;
var txtNode;
row=document.createElement('tr');
cell=document.createElement('td');
cell.setAttribute('bgcolor','#ffffff');
cell.setAttribute('border','0');
txtNode=document.createTextNode(data);
cell.appendChild(txtNode);
row.appendChild(cell);
return row;
}
//清除层里面的东西
function clearData(){
var ind=document.getElementById('tipbody').childNodes.length;
for(var i=ind-1 ;i>=0; i--){
document.getElementById('tipbody').removeChild(document.getElementById('tipbody').childNodes[i]);
}
document.getElementById('tipbody').style.border="none";
}

// 下面是显示层
<div style="position:absolute" id="showtip">
<table id='tip' bgcolor="#fffafa" border="0" cellspacint='2' cellpadding='2'>
<tbody id="tipbody"></tbody>
</table>
</div>