Search code examples
javascriptflashcookiesactionscript

Ad Banner Hide/Unhide with Javascript Cookie Validation


I'm trying to implement something like this: http://code.google.com/p/iab-billboard-adunit/ , on my site...

The demo for it is here: http://johnpaulkelly.me/iab/js_nobranded/index.html

My main issue is that I'd like to make the ad an image and not a flash file. It's easy enough to insert a .jpg into where the ad would go (in the Javascript itself), but once I do that I lose the "Close Ad" button which is part of the Action Script functionality.

Could someone help me out, or suggest the best possible way to go about appending the "Close Ad" functionality to an HTML element versus having it be part of the action script? (And not interupt the generation of the cookie)

Is this easily possible? I'm new to Javascript in general, but I could likely figure it out once I'm pointed in the right direction--I just can't seem to wrap my head around the easiest way to go about doing this...

If it makes it easier, I don't need to retain the "Show Ad" button once the cookie has been set if it makes it any simpler...

(Again, perhaps this is not the best way to do something like this--so if someone has an alternative way of going about similar functionality...I'm completely open to trying it out)


Solution

  • If you simply want to add a hide AD link, add your image and a link in the function loadBanner() by changing the second line using your own image url. You will also need some css to style that close text.

    Just noticed that this code will be inside the iframe. It will need to call out to the parent for the close function like this.

    Javascript:

    window.frames["banner"].document.write('<a href="#" id="closeAd" onclick="window.parent.document.getElementById('adUnit').style.display = 'none';">CLOSE AD <b>X</b></a>'); 
    

    CSS: This needs to be in the iframes code

    #closeAd {
        position: absolute;
        right: 0;
        color: white;
        text-decoration: none;
        padding: 2px;
        line-height: 1em;
    }