All geek questions in one place

How to make background clickable

I was asked to make a sponsored background (site capture) for one of our sites, and the question arose as to whether I can make logos in the background lined click.

My initial thought was “no,” but the more I think about it, the more I think it would be possible if I would either use JavaScript to make the body element clickable, or fake the background image as a layer below the content and make its available for use.

Has anyone done this before with success with one of these approaches or the other?

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;">...
+3
source share
5 answers

( ) IE Mozilla. onClick, , , , , "", BOTH, , , .

PPK , .

+3

click :

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

click -div . ( ).

0

, :

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

: http://newline.dk/index.aspx

0
source

I wrote a solution for this, because I could not find the full one, which was a cross browser. It is designed to place and display the interactive background of the sponsor in a network of sites.

Put this code in the js file and place it in the central domain:

$(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 this on one or more 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>
0
source

Source: https://habr.com/ru/post/1707858/

More articles:


All Articles