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>

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

1 个答案: