使用 jquery 使背景可点击

发布于 2024-11-03 13:23:42 字数 723 浏览 1 评论 0原文

我正在我的网站上推出一个广告，该广告是一个巨大的背景图像（放置在网站内容后面）。该网站是 decibelmagazine.com。目前该网站有一个非常大的背景图片，将被广告取代。我需要广告可点击（位于网站内容的左侧和右侧）。广告将作为背景图片放置（不是内嵌的）。

也就是说，我需要这个背景图像是可点击的（带有指定的网址）。我正在考虑像这样构造它：

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;
    });

这种方法有效吗？我不希望网站的内容可点击（即使它位于正文内部）。我应该使用 z-index 来防止这种情况吗？只是在寻找添加网站皮肤（广告）的最佳方法（考虑到 decibelmagazine.com 上的标记）

谢谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无言温柔 2024-11-10 13:23:42

这样你就可以做到这一点：

<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");   
});

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");   
});

回复收藏 0 原文

人海汹涌 2024-11-10 13:23:42

呃，不不不。在您的正文中添加 href - 坏主意。你就不能做这样的事吗？

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";
});

或:

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";
});

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";
});

回复收藏 0 原文

风启觞 2024-11-10 13:23:42

我认为更好的方法是将容器放在内容后面（使用 position: 和 z-index:）并使 that div 可点击。您将遇到的问题是，如果您执行 $(body).click() 您将获得每次点击来冒泡到 body (除非你强迫一切都使用 .stopPropagation() 这将是一个痛苦）。