新功能上线：客户端写博客，随时保存，图片批量贴　 IT北斗星争霸，看看咱博友的真面目！

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

2008-06-11 08:45:58

把鼠标放上图片，在鼠标旁显示图片及图片信息的代码（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 %>/images/image.jpg" class="ele_inner" onmousemove="showPic(event,"http://blog.51cto.com/viewpic.php?refimg=" + this.src,'中国北京','2008');"/>
</body>
</html>

上一篇 Oracle的分页查询语句　　下一篇 webwork上传文件

类别：Ajax ┆ 技术圈() ┆ 阅读() ┆ 评论() ┆推送到技术圈 ┆返回首页

相关文章

文章评论

myjavaword

2008-06-11 15:59:37

工作中遇到过很多问题，所以经常上网查找技术解决的方案，说实话，上网找资料，最希望找到的是源码，因为实践是检验真理的唯一标准，所以源码在我的文章中都占了相当大的比例，希望大家能够习惯并提出宝贵意见。

ndebyq

2008-06-13 11:52:10

very useful,thank you

昵称：
验证码：		点击图片可刷新验证码　　博客过2级，无需填写验证码
内容：

路，要走难的，直到苦尽甘来

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