Jquery script to make background clickable

Question

I am skinning a site with an ad, and I want to make the entire ad clickable. The ad takes up the entire background (body) as shown below

body {
background-attachment:scroll;
background-color:#000000;
background-image:url("http://gunshyassassin.com/wp-content/uploads/2010/10/gunshy_takeover2OUTNOW4.jpg");
background-position:center top;
background-repeat:repeat-x;

I have used css to absolutely position the anchor, but it won''t work due to the size of the background. I am looking for a jquery script that basically says:

when you hover over the background, turn the pointer into a curser. If you click anywhere on the background, go to this link: http://google.com. BUT, if you hover over the main container, (a child of the body, obviously), disable the hover and link.

Any ideas?

Answer 1

Impossible the way you describe it, try positioning a new banner (display: block, position: absolute; top: ..px, left: 50%; margin-left: -bannerwidth/2px;) absolute in the body

Answer 2

I would create a div that (as Koen said) is absolute positioned at 0,0 and fills the screen and then add a click handler to that:

$("#fullpageadvert").click( function() {
  do stuff;
});

Answer 3

There is no way to do so. But you can add a dummy absolute div on the background:

#dummy{
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0px;
   right: 0px;
   z-index: -1;
}