Выбор карты не изменится

Question

Я работаю над картой, которая изменяет связанное изображение на основе того, где мышь висит/что выбрано. Наведение и выбор для части карты 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"); 
     } 

}); 


}); 

Answer 1

Добавьте это в случае 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.