图像地图选择不会显示变化

时间:2014-09-15 14:39:59

标签: javascript jquery imagemap selectionchanged


我在地图上工作,根据鼠标悬停的位置/选择的内容更改链接的图像。地图的INTL部分的悬停和选择正常工作,但是当您选择地图的北美部分时,它拒绝重新选择INTL部分。如果有人知道如何解决这个问题我真的很喜欢这个输入。这是我第一次使用图像地图,我发现它有点令人困惑。谢谢!

$(document).ready(function () {
var $a = 15;
var $b = 15;

    $('#north').on("mouseenter", function () {
        if ($('#mapimg').attr('src') === 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP.png') $('#mapimg').attr('src', 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_NA.png');
        if ($('#mapimg').attr('src') === 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_INT.png') $('#mapimg').attr('src', 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_NA.png');
    });
    $('#north').on("mouseleave", function () {
        if ($('#mapimg').attr('src') === 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_NA.png') $('#mapimg').attr('src', 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP.png');


    });




    $('#intl').on("mouseenter", function () {
        if ($('#mapimg').attr('src') === 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP.png') $('#mapimg').attr('src', 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_INT.png');

    });

    $('#intl').on("mouseleave", function () {
        if ($('#mapimg').attr('src') === 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_INT.png') $('#mapimg').attr('src', 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP.png');


    });

    $('#intl').on("click", function () {
        $('.intlogo').css({"opacity":"1"});
        $('.northlogo').css({"opacity":".3"});
        var $a = 10;
        var $b = 5;
        if ($a > $b) {$('#intl').off("mouseleave");}
        else if($a < $b){$('#intl').on("mouseleave");}
         else{
        $('#north').on("mouseleave");
        $('#intl').on("mouseleave");
        }
    });

    $('#north').on("click", function () {
         $('.intlogo').css({"opacity":".3"});
     $('.northlogo').css({"opacity":"1"});
       var  $a = 5;
       var  $b = 10;
        if ($a < $b){$('#north').off("mouseleave");}
        else if ($a > $b) {$('#north').on("mouseleave");}
        else{
        $('#north').on("mouseleave");
        $('#intl').on("mouseleave");
        }

 });


});

1 个答案:

答案 0 :(得分:0)

将此添加到您的intl mouseenter事件:

if ($('#mapimg').attr('src') === 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_NA.png') {
  $('#mapimg').attr('src', 'http://pinnacleint.com/new/wp-content/uploads/2014/09/MAP_INT.png');
}

您在north mouseenter事件中执行类似操作。