Question

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

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

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上给出标记，只是寻找添加网站皮肤（广告）的最佳方式

谢谢！

Answer 1

这样你可以这样做：

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

Answer 2

呃，不，不，不。将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; }

JS

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

Answer 3

我认为更好的方法是在内容后面放置一个容器（position:和z-index:）并使 div可点击。您将要遇到的问题是，如果您执行$(body).click()，您将会每次点击以冒泡到正文（除非您强制使用所有内容{{1}这将是一种痛苦。）

使用jquery使背景可单击

3 个答案: