<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.wangzuxi.cn/wp-content/uploads/jquery-1.3.2.js"></script><!--包含jQuery库文件-->
<script type="text/javascript" src="http://www.wangzuxi.cn/wp-content/uploads/jquery.tooltip.js"></script><!--包含jQuery库的tooltip插件文件-->
<style>
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
/* tooltip的样式 */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
</style>
</head>
<body>
<div><a href="" class="tooltip"><img src="http://www.wangzuxi.cn/wp-content/uploads/image/wife.jpg" /></a></div>
</body>
</html>
1: /*
2: * Tooltip script
3: * powered by 淅淅代码雨
4: *
5: * written by Wany
6: *
7: *
8: */
9: this.tooltip = function(){ 10: var xOffset = 10;//定义x的偏移量
11: var yOffset = 20;//定义y的偏移量
12: $("img").mousemove(function(e){ 13: var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//获取当前鼠标相对img的x坐标
14: var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//获取当前鼠标相对img的y坐标，（以下用不着，可删除）
15: var tipTitle;//定义提示标题
16: if(positionX<=$(this).width()/2)//当当前鼠标相对x坐标小于图片宽度的一半时执行
17: { 18: $('p').remove();//移除p标签 19: $('a').attr('href','http://www.google.cn');//修改a标签的href属性以改变链接 20: tipTitle='谷歌';
21: }
22: else
23: { 24: $('p').remove(); 25: $('a').attr('href','http://www.baidu.com'); 26: tipTitle='百度';
27: }
28: $("body").append("<p id='tooltip'>"+tipTitle+"</p>");//在body标签里添加这个p标签，实现提示功能 29: $("#tooltip").css("top",(e.pageY - xOffset) + "px")//为id为tooltip的元素设置css样式 30: .css("left",(e.pageX + yOffset) + "px") 31: .fadeIn("fast");//添加动画效果 32: },
33: function(){ 34: $("#tooltip").remove();//鼠标移动时移除tooltip，实现提示和鼠标的相对位置不变 35: });
36: $("img").mouseout(function(e){ 37: $("#tooltip").remove();//鼠标移出img标签时不再显示tooltip，用remove函数将其移除 38: });
39: };
40: $(document).ready(function(){ 41: $('img').css('border','none'); 42: tooltip();
43: });