Image flashing on mouse over

I cannot fix it immediately, because it would get too much time, as you geometry is complex, but will need big change, but I can explain what's wrong and how can you fix it.

First of all, I removed your flashing code. You can use more compact schema of handling mouse in/out events:

$('.world_map_container area').each(function () {
    // Assigning an action to the mouseover event
    $(this).hover(
        function () {
            var country_id = $(this).attr('id').replace('area_', '');
            // show
       }, 
       function () {
            var country_id = $(this).attr('id').replace('area_', '');
            // hide
        }
    );
});        

Now, if I add you former event handler instead of commented out lines, it will work exactly as your sample. Now let me explain the flashing. You are getting in infinite loop. You handle mouse enter on some element. Then you make some element on top of it visible. It covers the element behind it, which automatically make it not having the mouse pointer in it, and it automatically invokes the mouse-out event.. The handler method below is called, and it causes the shown element hide, which in turn calls the first handle again. Do you see the point?

This way, you cannot play with the properties "display" or "visibility". Instead, you should change the style of the element itself, but you cannot replace one with another, as it will cause flashing. Doing it means changing nearly all your code.

—SA