Determining where a user clicks an image

I'm working with Javascript/jQuery and CSS to have a "background" image of a map of Oklahoma fill the screen. The idea is that the user will click a certain one of a few different "areas" of the map, and an event will fire based on which area they click.

My problem is that I 开发者_Python百科need to determine where the user clicks. I've played around with using pixels, but pixels are unreliable since the dimensions are changed by the screen size. I've thought about cutting the background image into separate images and making them each their own container, but that seems unnecessarily complicated.

So, is there a way for me to determine where a user clicks on a screen? I may supply some of the code I've made and tried in a bit; right now it's all in pieces as I'm still trying different things!

Here is one thing that I tried previously:

$(document).ready(function()
{
    $("#container").click(function(e)
    {
        var x = ("#container").pageX;
        var y = ("#container").pageY;
        if(x >= ? && x <= ? && y >= ? && y <= ?) 
        {
            alert('You clicked the panhandel!');
        }
   }); 
});

I set the x and y values within the if statement requirements to the pixel values which "boxed" the area that I wanted the alert to pop up, but nothing happened.

EDIT Thank you for your help and time, I appreciate it greatly! The last thing I'm confused about is what should go inside the if(). Since the element will BE the size of the screen, I don't think I really need offset, but

 if(x >= 200 && x <= 300 && y >= 200 && y <= 300) 

That is, the "coordinates" I find for how big a section of the image is might be different for another sized screen, so what should I do about x and y?

I'm not sure how to explain this decently, and if this last part can't be answered I'll understand and keep looking!

http://api.jquery.com/event.pageX/ and http://api.jquery.com/event.pageY/

$(element).click(function(event) {
    var x = event.pageX,
        y = event.pageY;
});