<!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>無(wú)標(biāo)題文檔</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script><!--包含jQuery庫(kù)文件-->
<script type="text/javascript" src="jquery.tooltip.js"></script><!--包含jQuery庫(kù)的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;//獲取當(dāng)前鼠標(biāo)相對(duì)img的x坐標(biāo)
var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//獲取當(dāng)前鼠標(biāo)相對(duì)img的y坐標(biāo)，（以下用不著，可刪除）
var tipTitle;//定義提示標(biāo)題
if(positionX<=$(this).width()/2)//當(dāng)當(dāng)前鼠標(biāo)相對(duì)x坐標(biāo)小于圖片寬度的一半時(shí)執(zhí)行
{
$('p').remove();//移除p標(biāo)簽
$('a').attr('href','http
//www.google.cn');//修改a標(biāo)簽的href屬性以改變鏈接
tipTitle='谷歌';
}
else
{
$('p').remove();
$('a').attr('href','http
//www.baidu.com');
tipTitle='百度';
}
$("body").append("<p id='tooltip'>"+tipTitle+"</p>");//在body標(biāo)簽里添加這個(gè)p標(biāo)簽，實(shí)現(xiàn)提示功能
$("#tooltip").css("top",(e.pageY - xOffset) + "px")//為id為tooltip的元素設(shè)置css樣式
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");//添加動(dòng)畫(huà)效果
},
function(){
$("#tooltip").remove();//鼠標(biāo)移動(dòng)時(shí)移除tooltip，實(shí)現(xiàn)提示和鼠標(biāo)的相對(duì)位置不變
});
$("img").mouseout(function(e){
$("#tooltip").remove();//鼠標(biāo)移出img標(biāo)簽時(shí)不再顯示tooltip，用remove函數(shù)將其移除
});
};
$(document).ready(function(){
$('img').css('border','none');
tooltip();
});
