有一個可點擊的圖像在WordPress的打開嵌入的內容 - 太空侵略者

Question

我希望能夠點擊圖片上的我的博客頁面中的一個，然後有啓動一些嵌入式內容。

具體來說，我想創造這個太空侵略者遊戲的封面圖片，網址爲：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和對象或iframes。如果你還沒有的jQuery的網站上提供，你可以使用這個標籤從谷歌加載它。

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