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

以下是使用 jQuery（一个 JavaScript 库）的方法：

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>