如何使背景可点击
[英]How can I make a background clickable
问题描述
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: jQuery的：
$('body').click()
HTML: 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
3 已采纳 2009-05-07 13:50:28
You'd need to be careful around event order (event capturing vs. bubbling) differences between IE and Mozilla. 您需要注意IE和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. 如果你有一个onClick事件的元素基本上占用了整个页面，然后是“top”上的其他可点击元素，点击其中一个元素可能会导致两个事件被触发，这可能不是预期的功能。
解决方案2
0 2012-11-01 22:04:34
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>
解决方案3
0 2009-05-07 13:15:30
为什么不将背景图像转换为图像映射，并将click事件绑定到每个区域：
$('#area51').click(function() {...
解决方案4
0 2009-05-07 13:17:39
A click event on sponsors-div should work. sponsors-div上的点击事件应该有效。 Putting it on the body may affect other parts of the page (child elements of body). 将它放在身体上可能会影响页面的其他部分（身体的子元素）。
解决方案5
0 2009-05-07 15:31:53
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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.