 
<!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="jquery-1.3.2.js"></script><!--包含jQuery庫文件--> 
<script type="text/javascript" src="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="image/wife.jpg" /></a></div> 
</body> 
</html> 

復制代碼代碼如下:

 
/* 
* Tooltip script 
* powered by 淅淅代碼雨 
* 
* written by Wany 
* 
* 
*/ 
this.tooltip = function(){ 
var xOffset = 10;//定義x的偏移量 
var yOffset = 20;//定義y的偏移量 
$("img").mousemove(function(e){ 
var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//獲取當前鼠標相對img的x坐標 
var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//獲取當前鼠標相對img的y坐標，（以下用不著，可刪除） 
var tipTitle;//定義提示標題 
if(positionX<=$(this).width()/2)//當當前鼠標相對x坐標小于圖片寬度的一半時執(zhí)行 
{ 
$('p').remove();//移除p標簽 
$('a').attr('href','http 
//www.google.cn');//修改a標簽的href屬性以改變鏈接 
tipTitle='谷歌'; 
} 
else 
{ 
$('p').remove(); 
$('a').attr('href','http 
//www.baidu.com'); 
tipTitle='百度'; 
} 
$("body").append("<p id='tooltip'>"+tipTitle+"</p>");//在body標簽里添加這個p標簽，實現(xiàn)提示功能 
$("#tooltip").css("top",(e.pageY - xOffset) + "px")//為id為tooltip的元素設置css樣式 
.css("left",(e.pageX + yOffset) + "px") 
.fadeIn("fast");//添加動畫效果 
}, 
function(){ 
$("#tooltip").remove();//鼠標移動時移除tooltip，實現(xiàn)提示和鼠標的相對位置不變 
}); 
$("img").mouseout(function(e){ 
$("#tooltip").remove();//鼠標移出img標簽時不再顯示tooltip，用remove函數(shù)將其移除 
}); 
}; 
$(document).ready(function(){ 
$('img').css('border','none'); 
tooltip(); 
}); 