How can I make a background clickable

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

PPK explains it better than I can.

Answer 4

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:

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

Answer 5

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

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