如何在图像地图上创建一个html工具提示？ [英] How to create a html tooltip on top of image map?

问题描述

我有以下代码：

<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工具提示出现在鼠标顶部，并移动它。如何使用jQuery做这样的事情？

I want to show my pure html tool tips appear on top of mouse and move fllowing it. How to do such thing with jQuery?

推荐答案

真的你应该给所有的工具提示一个共同的类，元素，但这对您现有的HTML有效。

Really you should give a common class to all the tooltips, and id to all the elements, but this works against your existing 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 /

这篇关于如何在图像地图上创建一个html工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！