鼠标放在图片上在另外层显示图片及图片信息

把鼠标放上图片，在鼠标旁显示图片及图片信息的代码（jsp+javascript）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
%>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< link href="<%=path% >/css/css.css" rel="stylesheet" type="text/css" />
< script language ="javascript" >

function showPic(a,sUrl,chandi,riqi){
var x,y;
var   event=a?a:window.event;
var   mX   =   event.x   ?   event.x   :   event.pageX;
var   my   =   event.y   ?   event.y   :   event.pageY;
x = event.clientX;
y = event.clientY;
document.getElementById( "Layer1").style.left = x;
document.getElementById( "Layer1").style.top = y;
document.getElementById( "Layer1").style.left=mX+10+ "px";
document.getElementById( "Layer1").style.posTop=my+10 + "px";
document.getElementById( "Layer1").innerHTML = "<div class='content'><p>产地："+chandi+ "</p><p>生产日期："+riqi+ "</p></div><div class='img_box'><div class='ele_box'><img style='float:left;' src=\"" + sUrl + "\"></div></div>";
document.getElementById( "Layer1").style.display = "block";

}
function hiddenPic(){
document.getElementById( "Layer1").innerHTML = "";
document.getElementById( "Layer1").style.display = "none";
}

</script>
< style type ="text/css" >

/* public frame */
* { margin: 0; padding: 0;}
body { font: 12px/1.6em Verdana}
.clearfix { overflow: hidden; zoom: 1;}
/* public frame end */
.ele_box { background: #ccc; margin-top: 3px; margin-left: 3px;}
.ele_box .ele_inner { border: 1px #999 solid; position: relative; zoom: 1; display: block; left: -3px; top: -3px; background: #fff; zoom: 1; overflow: hidden;}
.ele_img_item .img_box { display: table-cell; padding-right: 10px; vertical-align: top; *float: left; *padding-bottom: 32767px; *margin-bottom: -32767px;}
.ele_img_item .content { display: table-cell; vertical-align: top; *float: left; *padding-bottom: 32767px; *margin-bottom: -32767px;}

</style>
</head>
< body >
< div id ="Layer1" class ="ele_img_item clearfix" style ="position:absolute;z-index:1;width: 260px; solid;display:none;" > </div>
< img src=\'#\'" % >/images/image.jpg" class="ele_inner" onmousemove="showPic(event,"http://blog.51cto.com/viewpic.php?refimg=" + this.src,'中国北京','2008');"/>
</body>
</html>