代碼如下:
<style>
li{ float:left; list-style:none; padding:3px;}
img{ border:#CCC 1px solid;}
#tooltip{ display:none; border:#CCC 1px solid; position:absolute;}
.img1{ display:block;}
.div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微軟雅黑;}
</style>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二個產品"><img src="images/apple_2.jpg" /></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三個產品"><img src="images/apple_3.jpg" /></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四個產品"><img src="images/apple_4.jpg" /></a></li>
</ul>
<script>
var x = 10;
var y = 10;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
this.imgTitle = this.myTitle ? this.myTitle : "無title";
var tooltip = "<div id='tooltip'><img class='img1' src='" + this.href + "'/><div class='div1'>" + this.imgTitle + "</div></div>"
$("body").append(tooltip);
$("#tooltip").css({
"top": +(e.pageY + y) + "px",
"left": +(e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
$("#tooltip").remove();
this.title = this.myTitle;
})
</script>