如何使背景可点击

I've been asked to make a sponsored background (site takeover) for one of our sites and the question arose of whether I can make the logos in the tiled background clickable.

我被要求为我们的一个网站制作赞助背景(网站接管),并且问题是我是否可以使平铺背景中的徽标可点击。

My initial thought was 'no', but the more I think about it, the more I think it'd be possible if I either used JavaScript to make the body element clickable, or fake the background image as a layer below the content and make that clickable.

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

Has anyone done this before with success with one of these approaches or a different one?

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

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;">...

5 个解决方案

#1

You'd need to be careful around event order (event capturing vs. bubbling) differences between IE and Mozilla. If you have an element with an onClick event that essentially takes up the entire page, and then other clickable elements on "top" of it, clicking on one of those elements can cause BOTH events to fire, which is likely not the intended functionality.

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

PPK explains it better than I can.

PPK比我能更好地解释它。

#2

Why not make the background image into an image map, and bind a click event to each area:

为什么不将背景图像转换为图像映射,并将click事件绑定到每个区域:

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

#3

A click event on sponsors-div should work. Putting it on the body may affect other parts of the page (child elements of body).

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

#4

You can make a very large anchor tag and force body to hide the overflow, like this:

您可以制作一个非常大的锚标记并强制正文隐藏溢出,如下所示:

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

Gain some inspiration from this site: http://newline.dk/index.aspx

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

#5

I wrote a solution for this since I couldn't find a complete one that was cross-browser. It is designed to host and display a clickable sponsor background across a network of sites.

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

Put this code into a js file and host it on a central domain:

将此代码放入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);

});

Then use it like so in one or many websites:

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

<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>

#1