html background ad

I have seen a lot of websites which "wrapper" widt开发者_开发知识库h is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site. Can you give me tutorial or something on that ?

Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:

$('body').bind('click', function(e) {
    if ($(e.target).closest('#container').size() == 0) {
        alert('click');
    }
}).bind('mouseover', function(e) {
    if ($(e.target).closest('#container').size() == 0) {
        $(this).css('cursor','pointer');
    } else {
        $(this).css('cursor','default');
    }
});

In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.

If you'd like to do it here on StackOverflow you could do it with this bit of code.

$('body').bind('click', function(e){ 
    if(!$(e.target).closest('#content').length) {
        alert('ad outside content clicked');
    }
});

Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.

You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever

Hope that helps

Tom

ps. Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.