Show and hide HTML before flash inserting

the thing i'm searching for my site is something that can show, and after 10 seconds, hide some html.

Exactly is for a games site. I want to show ads du开发者_如何学Cring 10 seconds, and after this time, load the .SWF file of the game.

During 10 seconds i want to show the window of the ad in the center of the field where later the game will be displayed. It's like a 700x500px window.

One of the problems is that the ad window maybe 300x200px and i want to put it in the center. It's like i want to make a scene of 10 seconds with tha ad showing like the game is loading.

I beg you to answer in a begginer level, i'm not expert in scripts, just know some html, that's why i'm a bit overwhelmed with the info i found in the net. I would appreciate that you tell me how to write the script or jquery in html in a literally way.

Sorry for being so novice, but i want to learn with the examples you could tell me. Thanks in advance.

This approach might work work you (requires jQuery).. You can see a working example (without the flash) here: http://jsfiddle.net/qyCX9/

I've tested in IE8, FF 3.8 and Google Chrome.

This is the HTML Markup:

<div id="advertisement" class="hidden">your advertisement here</div>
<div id="game">play game!</div>

This is the CSS to position the game and ad on top of each other:

<style type="text/css">

#advertisement {
    width: 300px; height: 200px;
    background: red;
 }

#game {
    width: 700px; height: 500px;
    background: green;
}

.hidden {
    display: none;   
}

</style>

This is the required javascript to position and display the ad, and then to remove it after a set number of seconds..

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">

// get game and ad container
var $game = $('#game'), $advertisement = $('#advertisement');

// position ad container in center of game
$advertisement.css({
    'position' : 'absolute',
    'top'      : ($game.height() - $advertisement.height()) / 2 + $game.scrollTop() + 'px',
    'left'     : ($game.width() - $advertisement.width()) / 2 + $game.scrollLeft() + 'px'
}).removeClass('hidden'); // show ad

// hide advertisement after x seconds..
var seconds = 3;
setTimeout(function () {
    $advertisement.addClass('hidden');
}, 1000 * seconds);

</script>

Let me know if this solution works for you!

Cheers!