Image Map Selection Won't Show Change

Question

I'm working on a map that changes the linked image based on where the mouse is hovering/what is selected. The hovering and selection for the INTL part of the map are working correctly but when you select the North America part of the map, it refuses to reselect the INTL part. If anyone know how to fix this I would really love the input. This is my first time working with image maps and I've found it a bit confusing. Thanks!

$(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");
        }

 });


});

Rick Hitchcock · Answer 1 · 2014-09-15T20:38:08.560

0

Add this to your intl mouseenter event:

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');
}

You do something similar in your north mouseenter event.

edited Sep 15 '14 at 20:38

answered Sep 15 '14 at 15:33

Rick Hitchcock

35,202
5
48
79

That allows it to switch again, however, it doesn't let North America to stay highlighted until you over over Intl. If you click on Intl and stay move the mouse away (not over North America) it stays gold... but if you click on North America and move it to the side (not over Intl) it changes back to blue. – Jess Sep 15 '14 at 20:12

Image Map Selection Won't Show Change

1 Answers1