<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
#tooltip{ border: 10px solid #990000; background-color: Maroon; width: 300px; height: 300px;}
</style>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
var x=0;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle?" "+this.myTitle : "";
var tooltip = "<div id='tooltip'><img width='300' height='300' src='"+this.href+"' alt='产品预览图' />"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY-x)+"px",
"left": (e.pageX+y)+"px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY-x)+"px",
"left": (e.pageX+y)+"px"
});
});
});
</script>
</head>
<body>
<ul>
<li><a href="images/a.jpg" class="tooltip" title="猪猪"><img width="200" height="200" src="images/a.jpg" alt="猪猪" border="0" /></a></li>
</ul>
</body>
</html>