var tip = {
$ : function(ele) {
if (typeof (ele) == "object")
return ele;
else if (typeof (ele) == "string" || typeof (ele) == "number")
return document.getElementById(ele.toString());
return null;
},
mousePos : function(e) {
var x, y;
var e = e || window.event;
return {
x :e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft,
y :e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop
};
},
start : function(obj) {
var self = this;
//var t = self.$("showImgDiv");
//var t = $("#showImgDiv");
var t = $("#"+obj.getAttribute("imgDivObj"));
obj.onmousemove = function(e) {
/*
var mouse = self.mousePos(e);
t.style.left = mouse.x + 10 + 'px';
t.style.top = mouse.y + 10 + 'px';
var imgSrc = obj.getAttribute("imgSrc");
var imgWidth = obj.getAttribute("imgWidth");
t.innerHTML = "<img width="+imgWidth+" src='"+imgSrc+"'></img>";
t.style.display = '';
*/
var mouse = self.mousePos(e);
var x = mouse.x;
var y = mouse.y;
t.css("left",x-210);
t.css("top",y-110);
t.css("z-index",100);
var imgSrc = obj.getAttribute("imgSrc");
var imgWidth = obj.getAttribute("imgWidth");
t.html("<img width="+imgWidth+" src='"+imgSrc+"'></img>");
//alert("a-->"+x+" y-->"+y+" "+t.html());
t.show();
}
obj.onmouseout = function() {
//t.style.display = 'none';
t.hide();
}
}
}
<td align="left" οnmοuseοver="tip.start(this)" imgDivObj="imgDiv3" imgWidth="300" imgSrc="${indexConfig.img01 }">
${indexConfig.img01 }
</td>
<div id="imgDiv3" style="position: absolute; left: 0; top: 0; display: none;"></div>