消息提示层问题

刚网上找了一个代码，可是点在文字上面，提示的位置是正常的。。点在图片的热点上提示位置就一直显示在浏览器的最左边。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jTip - The Jquery Tool Tip</title><style type="text/css" media="all">
@import "css/global.css";
#apDiv1 {
position:absolute;
width:71px;
height:42px;
z-index:1;
left: 277px;
top: 366px;
}
#apDiv2 {
position:absolute;
width:72px;
height:51px;
z-index:2;
left: 371px;
top: 365px;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtip.js" type="text/javascript"></script></head>
<body>
<div id="contentPad"><p><a href="ajax3.htm?width=375" class="jTip" id="three">Tip No Caption</a></p>
<p><a href="ajax5.htm" class="jTip" id="four1" name="Window caption or title">No Specified Width</a></p>
<p> </p>
<p> </p><p><a href="yahoo.htm?width=175&link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip">Go To Yahoo</a></p>
<p> </p>
<p>                                                   <img src="images/ajaxImage.jpg" alt="" width="200" height="136" usemap="#Map" />
  <map name="Map" id="Map">
    <a href="ajax5.htm" class="jTip" id="11" name="Window caption or title"> //对热点用了超链接，感觉这句放这里有些问题，直接放在热点的href里面又不能显示提示功能
    <area shape="rect" coords="114,11,190,63" href="#" alt="" /> //这里我在图片上加了热点
    </a>
  </map>
</p>
</div>
</body>
</html>
调用的CSS代码：
/* - - - - - - CSS Document - - - - - - - - -Title : Global style sheet for client-side web development
Author : Cody Lindley - - - - - - - - - - - - - - - - - - - - - */*{padding: 0; margin: 0;}/* ----- global default/initial styles ----- */
body {
background-color:#fff;
text-decoration: none;
}html, body {height:100%;}/* ----- base default font size, type, and line height ----- */
html body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}
html>body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}/* ----- add selectors here for font sizing ----- */
#JT_close_left, #JT_close_right{font-size: 1.1em;}
#JT_copy p, #JT_copy ul{font-size: 1.1em;}
p, label{font-size: 1.2em;}
/* ----- base links ----- */
a:link {
color: #CC6633;
text-decoration: none;
}
a:visited {
color: #CC6633;
text-decoration: none;
}
a:hover {
color: #999966;
text-decoration: none;
}
a:active {
color: #CC6633;
text-decoration: none;
}
a:focus{
color: #CC6633;
text-decoration: none;
}p {line-height:1.4em;margin:10px 0;}
hr{margin:10px 0;color:#999999;}ul{
list-style: none;
}ul li{
padding-top:3px;
}#contentPad{
margin:20px;
text-decoration: none;
}.formInfo a, .formInfo a:active, formInfo a:visited{
background-color:#FF0000;
font-size: 1.3em;
font-weight:bold;
padding:1px 2px;
margin-left:5px;
color:#FFFFFF;
text-decoration: none;
}.formInfo a:hover{
color:#660000;
text-decoration: none;
}/* ------> jtip <<<---------------------------------------------------------------*/#JT_arrow_left{
background-image: url(../images/arrow_left.gif);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
z-index:101;
left:-12px;
height:23px;
width:10px;
    top:-3px;
}#JT_arrow_right{
background-image: url(../images/arrow_right.gif);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
z-index:101;
height:23px;
width:11px;
    top:-2px;
}#JT {
position: absolute;
z-index:100;
border: 2px solid #CCCCCC;
background-color: #fff;
}#JT_copy{
padding:10px 10px 10px 10px;
color:#333333;
}.JT_loader{
background-image: url(../images/loader.gif);
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:12px;
}#JT_close_left{
background-color: #CCCCCC;
text-align: left;
padding-left: 8px;
padding-bottom: 5px;
padding-top: 2px;
font-weight:bold;
}#JT_close_right{
background-color: #CCCCCC;
text-align: left;
padding-left: 8px;
padding-bottom: 5px;
padding-top: 2px;
font-weight:bold;
}#JT_copy p{
margin:3px 0;
}#JT_copy img{
padding: 1px;
border: 1px solid #CCCCCC;
}.jTip{
cursor:auto;
}
全部文件打包测试:http://www.94bing.cn/soft/提示图层.rar
测试地址:http://www.94bing.cn/cs/index.htm整个文件包中包含jtip.js jquery.js和compressedjquery.js各位路过帮忙测试一下,要怎么修改才能在鼠标移动至图片热点上时，提示的位置也是正确的。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

加到IMG这里是位置是相对于整张图片的。我想针对一个图片上的热点的位置
<area shape="rect" coords="114,11,190,63" href="#" alt="" />
需要改动JS，不知道LZ能不能接受？
在JT_show方法上加一个参数imgId
function JT_show(url,linkId,title,imgId){
if(typeof(imgId)!='undefined') linkId=imgId;
if(title == false)title=" ";
        ...
在JT_init()方法中修改JT_show的调用
function JT_init(){
       $("a.jTip")
   .hover(function(){JT_show(this.href,this.id,this.name,this.imgId)},function(){$('#JT').remove()})
           .click(function(){return false});
}<p>                                                   <img id="img1" src="images/ajaxImage.jpg" alt="" width="200" height="136" usemap="#Map" />
  <map name="Map" id="Map">
    <a href="ajax5.htm" class="jTip" id="11" name="Window caption or title" imgId="img1"> //imgId指向图片的ID
    <area shape="rect" coords="114,11,190,63" href="#" alt="" />
    </a>
  </map>
</p>
如果非要用热区，楼主把class="jTip"对对位置自己设置一个新的class再引用到这个需要热区的图吧。
不过这个改动不影响正常的功能，只是加了一个特殊的判断，起到一个“转移焦点”的作用，我想应该是可以接受的，可以把imgId这个属性名设置的长一点，复杂一点，基本上不可能有冲突就行了
谢谢lihui_shine 的代码。
我试了一下，因为我有可能要用到一张大的图，上面放许多个热点。如果针对整张大图显示，就会出现位置太偏右的问题。
恩，是的，的确是以整个IMG为参照物其实要是以热点为参照物也不是没有办法，不过要改好多东西喽
<p>                                                   <span><img  src="images/ajaxImage.jpg" id="img1" alt="" width="200" height="136" usemap="#Map"/>

  <map name="Map" id="Map">
    <a href="ajax5.htm" class="jTip" id="11" name="Window caption or title" imgId="img1" imgLeft="10" imgTop="11">
    <area shape="rect" coords="114,11,190,63" href="#" alt="" /></a>
//imgId指向图片的ID，imgLeft指热点离图片右边框距离（图片宽度-coords中第3个值），imgTop指热点离图片上边框距离（coords中第2个值）
<a href="ajax5.htm" class="jTip" id="11" name="Window caption or title" imgId="img1" imgLeft="100" imgTop="100">
    <area shape="rect" coords="0,100,100,130" href="#" alt="" /></a>
  </map>
</p>JS修改以下2个函数
function JT_init(){
       $("a.jTip")
   .hover(function(){JT_show(this.href,this.id,this.name,this.imgId,this.imgLeft,this.imgTop)},function(){$('#JT').remove()})
           .click(function(){return false});
}function JT_show(url,linkId,title,imgId,imgLeft,imgTop){
if(typeof(imgId)!='undefined') linkId=imgId;
if(title == false)title=" ";
var absLeft = getAbsoluteLeft(linkId);
var absTop = getAbsoluteTop(linkId);
if(typeof(imgId)!='undefined'){
absLeft = parseInt(absLeft,10) - parseInt(imgLeft,10);
absTop = parseInt(absTop,10) + parseInt(imgTop,10);
}
var de = document.documentElement;
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var hasArea = w - absLeft;
var clickElementy = absTop - 3; //set y position

var queryString = url.replace(/^[^\?]+\??/,'');
var params = parseQuery( queryString );
if(params['width'] === undefined){params['width'] = 250};
if(params['link'] !== undefined){
$('#' + linkId).bind('click',function(){window.location = params['link']});
$('#' + linkId).css('cursor','pointer');
}

if(hasArea>((params['width']*1)+75)){
$("body").append("<div id='JT' style='width:"+params['width']*1+"px'><div id='JT_arrow_left'></div><div id='JT_close_left'>"+title+"</div><div id='JT_copy'><div class='JT_loader'><div></div></div>");//right side
var arrowOffset = getElementWidth(linkId) + 11;
var clickElementx = absLeft + arrowOffset; //set x position
}else{
$("body").append("<div id='JT' style='width:"+params['width']*1+"px'><div id='JT_arrow_right' style='left:"+((params['width']*1)+1)+"px'></div><div id='JT_close_right'>"+title+"</div><div id='JT_copy'><div class='JT_loader'><div></div></div>");//left side
var clickElementx = absTop - ((params['width']*1) + 115); //set x position
}

$('#JT').css({left: clickElementx+"px", top: clickElementy+"px"});
$('#JT').show();
$('#JT_copy').load(url);}
参考 http://blog.csdn.net/xfsnero/archive/2009/06/26/4301318.aspx