Я написал решение для этого, так как не смог найти полного кросс-браузерного. Он предназначен для размещения и отображения интерактивного фона спонсора в сети сайтов.
Поместите этот код в файл 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>