求助，怎么把这个js代码改成弹出的层里包含一个table

下面代码实现的效果是，当鼠标移动到一个图片上时候，弹出一个图片层。我想把这个图片层修改下，改成里面包含有table的层，table里有图片，有文字，类似这个论坛的头像效果，请高人指点迷津，如何修改。
代码如下
页面调用<script type="text/javascript">
YHover_1.photos('container','img');
</script>
CSS代码：
#overlayer{position:absolute;z-index:200;width:400px;height:220px; border:1px solid #999;background:url(../samples/zhangxinyuan.jpg) #FFF center; }
#overlayer img{width:400px;height:220px;}JS代码部分var YHover_2 = function(){
var D = document, ua = navigator.userAgent.toLowerCase(), isOpera = (ua.indexOf('opera') > -1), isIE = (!isOpera && ua.indexOf('msie') > -1); return {
photos: function(LPcontainer, samples){
var geren = D.getElementById(LPcontainer), Samples = geren.getElementsByTagName(samples), i, len = Samples.length, Overlayer = null, oSelf = this;
for (i = 0; i < len; ++i) {
Samples[i].onmouseover = function(){
var imgPath = this.parentNode.href, imgAlt = this.alt, bigImg = '<img src="' + imgPath + '" alt="' + imgAlt + '" />', pageX = oSelf.getPageX(this), pageY = oSelf.getPageY(this), viewportWidth = oSelf.getViewportWidth(), viewportHeight = oSelf.getViewportHeight(), layerWidth = 0, layerHeight = 0, xScroll = oSelf.getXScroll(), yScroll = oSelf.getYScroll();
if (!Overlayer) {
Overlayer = D.createElement('div');
Overlayer.id = 'overlayer';
D.body.appendChild(Overlayer);
}
else {
Overlayer.style.display = 'block';
}
layerWidth = Overlayer.offsetWidth;
layerHeight = Overlayer.offsetHeight;
if ((pageX + this.offsetWidth + 5 + layerWidth) > (viewportWidth + xScroll)) {
pageX -= 5 + layerWidth;
}
else {
pageX += this.offsetWidth + 5;
}
if ((pageY + this.offsetHeight + 5 + layerHeight) > (viewportHeight + yScroll)) {
pageY -= 5 + layerHeight;
}
Overlayer.style.left = pageX + 'px';
Overlayer.style.top = pageY + 'px';
Overlayer.innerHTML = bigImg;
};
Samples[i].onmouseout = function(){
Overlayer.style.display = 'none';
Overlayer.innerHTML = '';
};
}
},
getXScroll: function(){
var j = self.pageXOffset || D.documentElement.scrollLeft || D.body.scrollLeft;
return j;
},
getYScroll: function(){
var j = self.pageYOffset || D.documentElement.scrollTop || D.body.scrollTop;
return j;
},
getViewportWidth: function(){
var j = self.innerWidth;
var k = D.compatMode;
if (k || isIE) {
j = (k == "CSS1Compat") ? D.documentElement.clientWidth : D.body.clientWidth;
}
return j;
},
getViewportHeight: function(){
var j = self.innerHeight;
var k = D.compatMode;
if ((k || isIE) && !isOpera) {
j = (k == "CSS1Compat") ? D.documentElement.clientHeight : D.body.clientHeight;
}
return j;
},
getPageX: function(el){
var box = null, parentNode = null, left = 0;
if (el.getBoundingClientRect) {
box = el.getBoundingClientRect();
left = box.left + Math.max(D.documentElement.scrollLeft, D.body.scrollLeft);
}
else {
left = el.offsetLeft;
parentNode = el.offsetParent;
if (parentNode != el) {
while (parentNode) {
left += parentNode.offsetLeft;
parentNode = parentNode.offsetParent;
}
}
}
return left;
},
getPageY: function(el){
var box = null, parentNode = null, top = 0;
if (el.getBoundingClientRect) {
box = el.getBoundingClientRect();
top = box.top + Math.max(D.documentElement.scrollTop, D.body.scrollTop);
}
else {
alert('x');
top = el.offsetTop;
parentNode = el.offsetParent;
if (parentNode != el) {
while (parentNode) {
top += parentNode.offsetTop;
parentNode = parentNode.offsetParent;
}
}
}
return top;
}
};
}();