2011-03-29 97 views
1

我有以下代碼:如何在圖像地圖上創建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做這樣的事情?

回答

4

真的,你應該給一個公共類的所有工具提示,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/

+0

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

+0

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

2

貼在你的area標籤title="your tooltip"

+0

這將不允許任何HTML標籤 - 只是文字文本。 – 2013-04-17 17:19:42

0

關於使用jQuery UI在地圖>區域>提示,你需要添加:

$("area").tooltip({ track: true }); 

而且,樣式:

.ui-tooltip { } 
相關問題