javascript - 图像映射的悬停和选定状态

Question

嘿，这是我的代码:

<img id="body_image" usemap="#body_map" src="assets/images/body.jpg" alt="">

<map name="body_map">
   <area shape="poly" alt="d" href="#body_chart" name="ad" coords="153, 153, 145, 164, 150, 175, 163, 165, 163, 157" />
</map>

现在我需要为 map 区域添加悬停和选中状态。另外我想一次做更多的区域和多项选择。

现在你能帮我写下悬停和选中状态的全部代码吗？

Answer 1

这是一个 JQuery 版本:

$(document).ready(function() {
    if($('#location-map')) {
        $('#location-map area').each(function() {
            var id = $(this).attr('id');
            $(this).mouseover(function() {
                $('#overlay'+id).show();

            });

            $(this).mouseout(function() {
                var id = $(this).attr('id');
                $('#overlay'+id).hide();
            });

        });
    }
});

希望对您有所帮助! :)