把鼠标放上图片,在鼠标旁显示图片及图片信息的代码(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="<%=path %>/p_w_picpaths/p_w_picpath.jpg" class="ele_inner" onmousemove="showPic(event,this.src,'中国北京','2008');"/>
</body>
</html>