ansaurus

Question

Answer 1

+1 A:

$('body').click(function(event){
    window.location = "http://adsite.com";
});

Not sure that would work, but I don't know of any other way to make the background of an entire page clickable.

inkedmn 2009-09-16 20:45:36

I think it makes the whole page clickable. But it may be possible to clear childrens. See the other Gordons answer and comments to that.

lasseespeholt 2009-09-17 05:08:55

Answer 2

+2 A:

What is the expected click behavior of content not in the background? Will it be clickable independent of the background ad?

If this is the requirement I would design in a root div layer just after the body tag. Perhaps give it an id of "adsitelayer" that can be targeted. Make this the main container div. Set the dimensions to 100% and then make this clickable using jQuery, or what not, and then build the design on top of that.

Don't put this in the body. This way you can make it an interstitial div layer that can easily be extracted from your design on pages that don't need the advert.

By the way this is kind of an odd requirement. So basically if I click anywhere else on the page I am going to go to an advertisement? Implement this if the client demands it. But you should inform them that this is really bizarre behavior from a usability perspective and will likely turn off users of the website. Just my two cents.

Spam is spam not because of what it advertises, but the way it advertises. This behavior might raise eyebrows from an SEO point a view. I am not sure google will like this. They might even treat the site as malware, depending on their policy.

Gordon Potter 2009-09-16 21:44:16

There is content on the page which shall not be clickable.The problem I see is to make the div clickable (and show pointer cursor) without making the content inside clickalbe.I don't like it either. Actually, I do like background ads without link if the graphic is intended to the specific site.

lasseespeholt 2009-09-17 05:06:41

Answer 3

A:

I have some success using this method:

<body>
<script type="text/javascript">
        $(document).ready(function() {
            $('body').css('cursor', 'pointer');

            $('body').click(function(event) {
                if (event.target == event.currentTarget)
                    window.open('http://www.google.dk');
            });

            $('div#Center').hover(function() {
                $('body').css('cursor', 'auto');
            }, function() {
                $('body').css('cursor', 'pointer');
            });
        });
    </script>
<div id="Center">
My content...
</div>
</body>

I know it does not have a ad layer, but that did only work properly in IE. The mouse could not click on the top of the page.

This code is not flawless either. You can't click if you scroll down a page. Maybe something with the body tag not expanding downwards. I have body set to height: 100%; and min-height: 100%; but it did not work. Any suggestions?

lasseespeholt 2009-09-22 06:25:08

ansaurus

tags:

views:

answers:

Background ad on website

related questions