<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="F:/新建文件夹/EditPlus/cs/jquery-1.7.1.js"></script>
<style type="text/css">
#ad{
position:absolute;//绝对定位,不可少
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;//初始隐藏,增强效果
}
#aaa{
width:300px;
height:300px;
}
.im{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var x=10;
var y=20;
$(".ad").mouseover(function(e){
this.myTitle = this.title;
this.title="";
var ad = "<div id='ad'>"+this.myTitle+"<br/><img id='aaa' src='F:/456/P_1.jpg'></img>"+"<br/>"+"底部文字"+"</div>";
$("body").append(ad);//将ad元素动态的添加到body中
$("#ad").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function(){
this.title = this.myTitle;
$("#ad").remove();
}).mousemove(function(e){
$("#ad").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
})
});
});
</script>
</head>
<body>
<p><a href="#" class="ad" title="图片预览"><img class="im" src="F:/456/P_1.jpg"></img></a></p>
</body>
</html>