关于js动态链接提示信息框

<!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=gb2312" />
<title>无标题文档</title>
<script src="http://www.sdlipeng.cn/test/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.sdlipeng.cn/test//jquery.dimensions.js" type="text/javascript"></script>
<style type="text/css">
/* MUST tooltip styling */
.hide {position:absolute; z-index:800; left:-9999px;}/* general tooltip styling */
.hide {border:1px solid #000; padding:5px 10px;background:#fff; text-align:left;}
.hide h3 {font-size:16px; font-family:georgia, serif; color:#800; margin:0; padding:5px 0;}
.hide p {padding:5px 0; margin:0; font-family:arial; sans-serif; font-size:11px; line-height:1.5em;}
.hide img {border:1px solid #aaa; padding:5px;}/* styling the tooltip hover information */
span.toptip {color:#800; font-weight:bold; font-style:italic;}
a.toptip {font-weight:bold; color:#800; font-family: georgia, serif; font-style:italic;}
img.toptip {border:1px solid #800; padding:10px; margin:0 10px 10px 0; display:block; float:left;}
h2.toptip {color:#800; font-family: georgia, serif; font-style:italic;}/* specific tooltip styling */
#lifespan {width:200px;}
#rembrandt {width:250px;}
#gauguin {width:310px;}
#dimensions {width:260px; background:#fff url(images/jquery.gif) no-repeat left center; padding-left:130px; height:100px}
</style><script type="text/javascript">
$(document).ready(function(){
offSetX = 15;
offSetY = 10;
$("area").hover(function(e){
topTip = '#' + $(this).attr('class');
height = $(window).height();
width = $(window).width();
scrTop = $(window).scrollTop();
scrLeft = $(window).scrollLeft();
tipWidth = $(topTip).outerWidth();
tipHeight = $(topTip).outerHeight();
tipLeft = e.pageX + offSetX;
tipTop = e.pageY + offSetY; if ((e.pageX - scrLeft + offSetX + tipWidth) > width) {tipLeft = e.pageX - offSetX - tipWidth;}
if ((e.pageY - scrTop + offSetY + tipHeight) > height) {tipTop = e.pageY - offSetY - tipHeight;}
$(topTip)
.css("top",tipTop + "px")
.css("left",tipLeft + "px")
.show();
},
function(){
$(topTip).hide();
}); $("area").mousemove(function(e){ topTip = '#' + $(this).attr('class');
height = $(window).height();
width = $(window).width();
scrTop = $(window).scrollTop();
scrLeft = $(window).scrollLeft();
tipWidth = $(topTip).outerWidth();
tipHeight = $(topTip).outerHeight();
tipLeft = e.pageX + offSetX;
tipTop = e.pageY + offSetY; if ((e.pageX - scrLeft + offSetX + tipWidth) > width) {tipLeft = e.pageX - offSetX - tipWidth;}
if ((e.pageY - scrTop + offSetY + tipHeight) > height) {tipTop = e.pageY - offSetY - tipHeight;} $(topTip)
.css("top",tipTop + "px")
.css("left",tipLeft + "px");;
});
});</script>
</head><body style="margin:0px;">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #000000 solid">
  <tr>
    <td><img src="images/hy1.jpg" width="1000" height="595" border="0" usemap="#Map" /></td>
  </tr>
</table>
<!-- These are the tooltips stored at the end of the document --><div id="lifespan" class="hide">
<h3>Life span</h3>
<p>Born - March 30, 1853, Zundert, Neth.<br />Died - July 29, 1890, Auvers-sur-Oise, near Paris</p>
</div><div id="rembrandt" class="hide">
<h3>Rembrandt</h3>
<p>To external site http://www.ibiblio.org/wm/paint/auth/rembrandt/</p>
</div><div id="gauguin" class="hide">
<h3>Paul Gauguin</h3>
<img src="vincent/gauguin2.jpg" alt="Self Portrait" />
<p>Paysannes bretonnes (Breton peasant women) 1894 (160 Kb); Oil on canvas, 66 x 92 cm (26 x 36 1/4 in); Musee d'Orsay, Paris </p>
</div><div id="dimensions" class="hide">
<h3>jQuery Dimensions Plugin 1.1</h3>
<p>You will need this plugin to run the 'TopTip' Tooltips.</p>
</div><map name="Map" id="Map">
  <area shape="rect" coords="290,221,387,334" href="#" class="lifespan" />
  <area shape="rect" coords="640,222,705,334" href="#" class="rembrandt" />
  <area shape="rect" coords="735,396,803,471" href="#" class="gauguin" />
  <area shape="rect" coords="474,277,572,364" href="#" class="dimensions" />
</map></body>
</html>