使用悬停区域映射显示div中的alt文本 - 相对于悬停区域

时间:2013-04-22 05:27:38

标签: javascript map hover area

我正在尝试使用悬停区域的alt文本显示div - 相对于悬停区域的位置。

我可以显示文字,但不是在正确的位置。

这是我的js:

$(document).ready(function() {
if($('#Map')) {
    $('#Map area').each(function() {
    var altText = $(this).attr("alt");
        $(this).mouseover(function() {
    $("#popup").html(altText);
            $('#popup').show();

        });

        $(this).mouseout(function() {
    var altText = $(this).attr("alt");
            $('#popup').hide();
        });

    });
}
});

1 个答案:

答案 0 :(得分:1)

这样可以正常使用

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#popup").draggable();
    if ($('#Map')) {
        $('#Map area').each(function () {
            var altText = $(this).attr("alt");
            $(this).mouseover(function (event) {

                $("#popup").html(altText);
                $("#popup").css({ 'top': event.clientY, 'left': event.clientX });
                $('#popup').show();

            });

            $(this).mouseout(function () {
                var altText = $(this).attr("alt");
                $('#popup').hide();
            });

        });
    }
});

你需要制作div draggabele,然后才会动态地改变位置