使用jquery使后台可单击_Jquery_Html_Css_Background Image

使用jquery使后台可单击

jquery html css

使用jquery使后台可单击,jquery,html,css,background-image,Jquery,Html,Css,Background Image,我在我的网站上发布了一个巨大的背景图片广告（放在网站内容后面）。该网站是decibelmagazine.com。目前该网站有一个非常大的背景图像，将由广告取代。我需要的广告是可点击的（在网站内容的左侧和右侧）。广告将作为背景图像放置（非内联）这就是说，我需要这个背景图像是可点击的（与指定的url）。我在考虑这样构建它： HTML Jquery $("body").click( function() { window.location = $(this).attr

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

这就是说，我需要这个背景图像是可点击的（与指定的url）。我在考虑这样构建它：

HTML

Jquery

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

这种方法有效吗？我不希望该网站的内容是可点击的（即使它是在体内）。我应该使用z索引来防止这种情况吗？只是在寻找添加网站外观（广告）的最佳方式，因为decibelmagazine.com上有标记

谢谢

嗯，不，不，不。在你的身体上加一个

href

——坏主意。你不能这样做吗

CSS:

HTML:

或：

CSS

我认为更好的方法是在内容后面放置一个容器（带有

位置：

和

z-index:

），并使该div可单击。您将遇到的问题是，如果您执行

$（body）。单击（）

，您将看到每次单击都会冒泡到body（除非您强制所有操作都使用

。stopPropagation（）

，这将是一种痛苦）。

通过这种方式，您可以执行以下操作：

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

Javascript:

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

你也可以将“内容”包装在clickspot标签中，然后内容也可以点击。他不希望内容可以点击。

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

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

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

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

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

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

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