css - 有一个可点击的图像来打开 wordpress 中的嵌入内容 - Space Invaders

Question

我希望能够点击我的一个博客页面上的图片，然后启动一些嵌入的内容。

具体来说，我想为这个 Space Invaders 游戏创建封面图片，可在此处找到:http://arcade.gameex.com/playgame/6135/space-invaders.html

嵌入代码=

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

我想点击页面中我的自定义封面图片，然后启动游戏，但我不知道该怎么做。

我已经使用 wordpress 几年了，但只做了一些小的样式调整……没有像这样。

对于初学者的任何帮助将不胜感激!我不是经验丰富的程序员。

-C

Answer 1

以下是使用 JavaScript 库 jQuery 的方法:

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>

请注意，您需要配置 WordPress 和您的编辑器以允许 JavaScript 和对象或 iframe。如果网站上还没有可用的 jQuery，则可以使用此标记从 Google 加载它:

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