HTML JQuery Maphilight not hilighting - don't know why

Question

On my page http://www.veniria.esy.es/#veniria i have an image map with JQuery maphilight plugin. It was working totally fine, until I have added main page to the site. Now it's not working at all, like JQuery is not detecting mouseover, because this don't work either:

$('#linkAbhaeghar').mouseover(function(e) {
    $('#abhaegharMap').mouseover();
}).mouseout(function(e) {
    $('#abhaegharMap').mouseout();
}).click(function(e) {
    e.preventDefault(); 
});

and buttons on the right are not hilighting.

Answer 1

Currently you running the $("#veniria").maphilight(); on document ready. But on document ready the map is hidden and therefore the canvas gets width and height set to zero.
You need to change the:

$("#pageMain").fadeIn(500);

To:

$("#pageMain").fadeIn(500, function(){
    $("#veniria").maphilight();
});

In both

function hash() {
    if(window.location.hash == "#veniria") {
        $(".page").fadeOut(500).promise().done(function(){
            $("#pageMain").fadeIn(500, function(){
                $("#veniria").maphilight();
            });
        });
    }
}

And

$("#menuMain").click(function(){
    $(".page").fadeOut(500).promise().done(function(){
        $("#pageMain").fadeIn(500, function(){
            $("#veniria").maphilight();
        });
    });
});