如何在圖像地圖上創建html工具提示？

我有以下代碼：如何在圖像地圖上創建html工具提示？

<div style="width:100%" align="center"> 
    <img src="./platform-logos-big.png" alt="Icons of platforms we support: Windows Linux and MacOS X" border="0" align="middle" usemap="#Map"> 
    <map name="Map"> 
     <area shape="rect" coords="0,0,87,100" href="#Linux" alt="Click here to download Linux version of CloudClient"> 
     <area shape="rect" coords="88,0,195,100" href="#Windows" alt="Click here to download Windows version of CloudClient"> 
     <area shape="rect" coords="196,0,300,100" href="#MacOsX" alt="Click here to download MacOsX version of CloudClient"> 
    </map> 
</div> 
<div class="WTT"> 
tooltipWin 
</div> 
<div class="LTT"> 
tooltipLin 
</div> 
<div class="MTT"> 
tooltipMac 
</div>

我想告訴我的純HTML工具提示出現在鼠標的頂部，並移動fllowing它。如何用jQuery做這樣的事情？

來源

2011-03-29 Rella

真的，你應該給一個公共類的所有工具提示，id爲所有元素，但是這對你現有的HTML有效。

$('.WTT,.LTT,.MTT').css({ 
    position: 'absolute' 
}).hide() 
$('area').each(function(i) { 
    $('area').eq(i).bind('mouseover', function(e) { 
     $('.WTT,.LTT,.MTT').eq(i).css({ 
      top: e.pageY, 
      left: e.pageX 
     }).show() 
    }) 
    $('area').eq(i).bind('mouseout', function() { 
     $('.WTT,.LTT,.MTT').hide() 
    }) 
})

小提琴這裏：http://jsfiddle.net/billymoon/BmxR7/

來源

2011-03-29 21:24:54

我修改它有點...的http：// jsfiddle.net/fdSKH/1/ – Rella 2011-03-30 10:11:04

用win/lin/mac標誌看起來更好 - win和lin的方式是錯誤的:)雖然可以添加到mouseover事件中，但偏移量和mousemove更新一樣捆綁。我在這裏稍作更新：http://jsfiddle.net/billymoon/X6P9M/ – 2011-03-30 11:07:49