如何使背景可点击答案

【问题标题】：How can I make a background clickable如何使背景可点击
【发布时间】：2009-05-07 13:12:35
【问题描述】：

有人要求我为我们的一个网站制作赞助背景（网站接管），但问题是我是否可以让平铺背景中的徽标可点击。

我最初的想法是“不”，但我越想越觉得如果我使用 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;">...

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

PPK 解释得比我还好。

【讨论】：

【解决方案2】：

为什么不把背景图片做成图片地图，给每个区域绑定一个点击事件：

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

【讨论】：

【解决方案3】：

在赞助商-div 上的点击事件应该可以工作。放在 body 上可能会影响页面的其他部分（body 的子元素）。

【讨论】：

【解决方案4】：

你可以做一个非常大的锚标签并强制body隐藏溢出，像这样：

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

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

【讨论】：

【解决方案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>

【讨论】：