I was asked the other day how Broadsheet.ie does the horrible clickable ad skins so I may as well document it here as well. I can’t remember how I exactly figured it all out but I’m sure posts on stackoverflow.com helped as well as looking at the source of the likes of entertainment.ie to see what they did. As always, this works for me and your mileage may vary.
First we set up the css for the background image:
body {
background-image: url(/images/some_image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
cursor: pointer;
}
#page {
cursor: auto;
}
This pins background image to the center of the page so if the user resizes the window it doesn’t move. It does mean that a user may not see it if their browser window is narrower than the background image.
To make the pointer turn into a hand when the user is hovering over it, you need the ‘cursor: pointer;’ line. However this makes the cursor a pointer everywhere, so for the actual content of the page ‘cursor: auto;’ needs to be set so it will use the correct default when hovering over content that is not a hyperlink.
Next we need to capture clicks made on the background. This is done using some JQuery:
function recordOutboundLink(link, category, action)
{
_gat._getTrackerByName()._trackEvent(category, action);
setTimeout('window.open("' + link + '")', 100);
}
jQuery(document).ready(function() {
jQuery("body").click(function(e) {
var target = jQuery(e.target);
if (target.attr('id') == 'body_id')
{
recordOutboundLink('http://www.karlmonaghan.com','outbound', 'karlmonaghan')
}
});
});
Last, but not least, we need to change the body tag:
<body id="body_id">
What the javascript in the document ready block does is capture click on the page. The id of the element clicked on is retrieved and if it was the id we’ve assigned to the body itself we call the recordOutboundLink function. This function takes 3 parameters – the URL the user should be brought to, the event category and event action. We use this function so we can record the click in Google Analytics for our own information. If you’re not interesting in the stats (but really, you should be) you can replace this line with a just a document.open call.
Personally I’m neither fond of this sort of advertising nor convienced that it’s particularly effective (although it will very effectively annoy your users) but if someone is willing to hand over a ball of money for it so be it.