Make background clickable with jquery
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; }
JS
$("#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).
加载中,请稍侯......
精彩评论