JQuery to change a <map> image source when clicking and/or hovering over an <area> - what am I doing wrong?

I've created an image map using the basic map and area tags. I've tested the map and all the areas behave as they are supposed to, so the HTML is definitely correct.

I am now trying to use JQuery to get the image of the map (the source) change according to the different areas when hovering and/or clicking on them. This way I am hoping to get a sort of 'interactive' map that shows how different places on the map are connected.
All the areas I have defined have a unique ID.

This is the script that I am using for the click version:

$(document).ready(function() {
    $('#area1').click(function() {
        $('#londonmap').css('src', 'area1map.png');
    });
});

The #area id name changes according to the area that is hovered on, whereas the #londonmap one is the ID of the image used as a map, the source of which needs to change according to the area you hover/click on.

I'm not a JQuery expert, so I need to ask - what am I doing wrong?

Solution

'src' is not a css property, but it's an attribute of the <img> tag.

$(document).ready(function() {
    $('#area1').click(function() {
        $('#londonmap').attr('src', 'area1map.png');
    });
});