Question

我被要求为我们的某个网站制作赞助背景（网站接管），并且出现的问题是我是否可以点击平铺背景中的徽标。

我最初的想法是'不'，但是我想的越多，我认为如果我使用JavaScript来使body元素可点击，或者将背景图像伪造成下面的图层，我就越有可能。内容并使其可点击。

有没有人在使用其中一种方法或另一种方法成功之前完成了这项工作？

jQuery的：

$('body').click()

HTML：

<body>
  <div id="sponsors-div" style="position:fixed;z-index:0;"><a style="display:block;height:100%" href="http://sponsors.url"></a></div>
  <div id="site-container" style="position:relative;z-index:1;">...

Answer 1

您需要注意IE和Mozilla之间的事件顺序（事件捕获与冒泡）差异。如果你有一个onClick事件的元素基本上占用了整个页面，然后是“top”上的其他可点击元素，点击其中一个元素可能会导致两个事件被触发，这可能不是预期的功能。

PPK解释得比我好。

Answer 2

为什么不将背景图像制作成图像地图，并将点击事件绑定到每个区域：

$('#area51').click(function() {...

Answer 3

sponsors-div上的点击事件应该有效。将它放在身体上可能会影响页面的其他部分（身体的子元素）。

Answer 4

你可以制作一个非常大的锚标签并强制身体隐藏溢出，如下所示：

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

从这个网站获得一些灵感：http://newline.dk/index.aspx

Answer 5

我为此编写了一个解决方案，因为我找不到一个跨浏览器的完整解决方案。它旨在通过网站网络托管和显示可点击的赞助商背景。

将此代码放入js文件并将其托管在中央域上：

$(function () {
//** change these values to your own
var bg_ad_css = "url(http://cdn.my-domain.com/sponsor-bg.jpg) no-repeat center top #ffffff";
var bg_ad_url = "http://www.sponsor-website.com/";
//**
var bg_ad_anchor = $(document.createElement("a"));
bg_ad_anchor.css({ display: "block", position: "absolute", "z-index": 0, top: 0, left: 0, width: $(window).width(), height: $(window).height() });
bg_ad_anchor.attr("target", "_blank").attr("href", bg_ad_url);
$(window).resize(function () {
    if (bg_ad_anchor) {
        bg_ad_anchor.css({ width: $(window).width(), height: $(window).height() });
    }
});
if (window._bg_ad) {
    for (var i = 0; i < _bg_ad.contentWrappers.length; i++) {
        var element = _bg_ad.contentWrappers[i];
        $(element.selector).css({ position: "relative", "z-index": element.zIndex == undefined ? 1 : element.zIndex });
    }
}
$("body").css({ "background": bg_ad_css }).append(bg_ad_anchor);

}）;

然后在一个或多个网站中使用它：

<script type="text/javascript">
    var _bg_ad = {
        //These should be content areas that need to be above the banner link
        //You may only need one element in this array, customize at will
        contentWrappers: [{ selector: "#top_bar", zIndex: 2 }, { selector: "#wrapper" }, { selector: "#footerBottom" }]
    };
</script>
<script type="text/javascript" src="http://www.my-domain.com/js/bg-ad.js"></script>

如何使背景可点击

5 个答案: