Make background clickable with jquery_问答_开发者

开发者 https://www.devze.com 2023-03-01 03:00 出处：网络

I am launching an ad on my site that is a huge background image (to be placed behind site content). The site is decibelmagazine.com. Currently the site has a very large background image that will be replaced by the ad. I 开发者_如何学编程need the ad to be clickable (to the left and right of the site content). The ad will be placed as a background image (not inline).

That said, I need this background image to be clickable (with an assigned url). I was thinking of structuring it like this:

HTML

<body url="http://google.com">

CSS

body{color:#222; background:#959595 url(images/mainbg.jpg) repeat-y center top; width:100%; display:table; width:970px; margin:0 auto;}

Jquery

$("body").click(
    function()
    {
        window.location = $(this).attr("url");
        return false;
    });

Will this method work? I do not want the content of the website to be clickable (even though it is inside the body). Should I use a z-index to prevent this? Just looking for the best way to go about adding a site skin (ad) given the markup on decibelmagazine.com

Thanks!

This way you can do this:

<body>
    <img class="ad" src="images/mainbg.jpg" alt="" rel="http://google.com" />
    <div class="contents">
     Contents here
    </div>
</body>

CSS:

img{position:absolute;display:block;top:0;left:0;z-index:1;}
div.contents{position:relative;z-index:1000;}

Javascript:

$("img.ad").click(function(e){
     window.location = $(this).attr("rel");   
});

Uh, no no no. Adding an href to your body - bad idea. Could you not do something like this?

CSS:

.clickspot { width: 20%; }
#content { width: 80%; }

HTML:

<body>
    <div class="clickspot"></div>
    <div id="content"></div>
    <div class="clickspot"></div>
</body>

JS:

$(".clickspot").click(function(){
    window.location = "http://link.to/my/advertiser";
});

Or:

CSS

#clickable { position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; z-index: -1;  }
#content { position: relative; z-index: 1; }

$("#clickable").click(function(){
    window.location = "http://link.to/my/advertiser";
});

I think the better way would be to put a container behind the content (with position: and z-index:) and make that div clickable. The problem you're going to run into is that if you do $(body).click() you're going to get every click to bubble up to body (unless you force everything to use .stopPropagation() which will be a pain).