"Hidden" coupon on landing page - how to make specific area interactive

[Sonny Forelli]

Dunno if anyone recalls the old celebritysexyteeth pages, but they had a "coupon" on their presell page that directed a user to click the 3rd star from the right (and had a screenshot of this with the star circled) once they clicked through to the order page.

We're trying to do something similar on a product order page, can someone point me in the right direction so I can start googling?

What am I trying to do? Make a 10x10 section of the background a clickable area? (I'd like to do something similar, click the second "e" in "Free" or something).

How would you go about something like this?

 

[dchuk]

create a container div, inside of it have your image to click, with an empty div right after that. With css, give it a height and width of 10px, display:block, then use negative margins to pull it into the position you want (use firebug and you can do this in like 3 seconds).

Then, use a jquery call in your document.ready area that is something like:

$('#container-div #click-area-div').click(function(){
alert('this shit be clicked now, boi');
});

 

[Sonny Forelli]

thanks dchuk!