Have a clickable image to open embedded content in wordpress – Space Invaders

1 Views

I would like to be able to click on an image on one of my blog pages and then have that start up some embedded content.

Specifically, I would like to create a cover image for this Space Invaders game, found here: http://arcade.gameex.com/playgame/6135/space-invaders.html

Read More

embed code = 

<iframe src = "http://arcade.gameex.com/embed.php?id=6135" width="480" height="360" />

I would like to click on my custom cover image in the page and then have the game start up, but I have no idea how to do this.

I’ve used wordpress for a few years now, but only doing minor style tweaks… nothing like this.

Any help for a beginner would be much appreciated! I am not an experienced programmer.

-C

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Here’s how you might do it with jQuery, a JavaScript library:

    http://jsfiddle.net/SMM2B/

    <style>
#cover {
    width: 480px;
    height: 360px;
    background: url(image.jpg) left top no-repeat;
}
#game {
    display: none;
    width: 480px;
    height: 360px;
}
</style>

<div id="cover"></div>

<div id="game">
    <object>...</object>
</div>

<script>
$(function() {
    $('#cover').click(function () {
        $(this).slideUp();
        $('#game').slideDown();
    });
});
</script>

    Note that you will need to configure WordPress and your editor to allow JavaScript and objects or iframes. If you don’t already have jQuery available on the site, you could use this tag to load it from Google:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>