代碼如下:
<!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坐標小於圖片寬度的一半時執行
{
$('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標簽，實現提示功能
$("#tooltip").css("top",(e.pageY - xOffset) + "px")//為id為tooltip的元素設置css樣式
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");//添加動畫效果
},
function(){
$("#tooltip").remove();//鼠標移動時移除tooltip，實現提示和鼠標的相對位置不變
});
$("img").mouseout(function(e){
$("#tooltip").remove();//鼠標移出img標簽時不再顯示tooltip，用remove函數將其移除
});
};
$(document).ready(function(){
$('img').css('border','none');
tooltip();
});